CODEWITHSUNDEEP
angulartypescriptbootstrap-4pipe
Tom Rudge
Tom Rudge

Reputation: 3272

Unable to preset select with 'selected' value - Angular bootstrap

https://stackblitz.com/edit/timeline-angular-7-ujb1nw

I'm struggling to get the documented 'selected' tag to pre-select my default select value. I think this might have something to do with the unique pipe I am applying and the way angular works.

I have tried various ways to get this as default/on load. e.g. 

<option value="All" selected>All</option>
<option *ngFor="let entry of timeLine | filterUnique" value="{{entry.location}}">{{entry.location}}</option>

Also tried [selected]='selected', ngvalue='null', ngvalue='All'

Maybe I have to add something to my uniquefilter.pipe?

I have created a pipe to pick up values for select options, some of these values are duplicated so I have added a unique pipe to only get the value once to populate my dropdown/select options. - maybe this is the cause that its not reading 'selected'?

Any help or experience here would be appreciated. thanks

https://stackblitz.com/edit/timeline-angular-7-ujb1nw

Upvotes: 0

Views: 543

Answers (3)

Sudipto Mukherjee
Sudipto Mukherjee

Reputation: 945

As per the code you have posted in stackblitz you just need to take a variable named "filteredLocation" in timeline.component.ts file and set default value to that variable.

Sample Code : https://stackblitz.com/edit/timeline-angular-7-puycmz

Upvotes: 2

frankie567
frankie567

Reputation: 1760

You're almost there. You just forgot to declare the filteredLocation in your component:

import { Component } from '@angular/core';

@Component({
  selector: 'my-timeline',
  templateUrl: './timeline.component.html',
  styleUrls: ['./timeline.component.css']
})
export class TimelineComponent {
  timeLine = [...];
  filteredLocation = 'All'; // Preset with the default value
}

You don't need the selected property on the "All" option then.

Upvotes: 3

Ramesh Reddy
Ramesh Reddy

Reputation: 10662

Try this in your timeline component.ts:

ngOnInit() {
    this.filteredLocation = 'All';
  }

Upvotes: 3

Related Questions