Angular set dropdown select option as default selected before iteration

Attribute selected will not help much if you are using ngModel then you can do easily with setting default value to the defined model.

<select [(ngModel)]="book.pageLayout">
  <option value="">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

Then inside component.ts

public book: any = {
   pageLayout: ''
}

Edit

To set default option we need to set pageLayout value to id instead of empty string.

public book: any = {
   pageLayout: 1
}

public availableLayouts: any = [
  {
    name: "One",
    id: 1
  },
  {
    name: "Two",
    id: 2
  }
]

You can use FormControl from Angular Reactive Form.It is easy. Angular Docs About Reactive Form You need to import reactive form to you module

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // other imports ...
    ReactiveFormsModule
  ],
})
export class AppModule { }

Than you need to create FormControl in you component.ts

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl('');
}

After this you need to set Form control to your element select in html

<select [formControl]="name">
  <option value="null">No Default Layout</option>
  <option *ngFor="let l of availableLayouts" [value]="l.id">
    {{l?.name}}
  </option>
</select>

If you need default value of select you must create formControl with value for example:

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

@Component({
  selector: 'app-name-editor',
  templateUrl: './name-editor.component.html',
  styleUrls: ['./name-editor.component.css']
})
export class NameEditorComponent {
  name = new FormControl(null);
}

///(you can pass any to new FormControl(0), or new FormControl(false), new FormControl('string'))

In this case default value for select will be null.And options with value null will be selected in dropdawn.

In you case new FormControl(0) as default value.

Try this <option [value]="undefined" selected>No Default Layout</option>, it should work.

try code:

this.fullNamePresentors = this.programInfo1.filter(item => item.time >  this.fulltextDate);

and:

  <select class="form-control" id="marasemaat" style="margin-top: 10%;font-size: 13px;" [(ngModel)]="fullNamePresentors" [formControl]="stateControl"  
    (change)="onSelect($event.target.value)">
    <option *ngFor="let char of programInfo1;let i = index;"  onclick="currentSlide(9,false)" value={{char.id}}>{{char.title + " "}}  ----> {{char.name + " "+ char.family }} ---- > {{(char.time.split('T', 2)[1]).split(':',2)}}</option>

  </select>

You can try this

ng-selected="selected"

https://docs.angularjs.org/api/ng/directive/ngSelected