Article From:https://segmentfault.com/q/1010000011701116
Question:

1. The @Input usage in the ngx-bootstrap example is not quite understood.

hero-parent.component.ts

@Component({
  selector: 'app-hero-parent',
  template: `
    <h2>{{master}} controls {{heroes.length}} heroes</h2>
    <app-hero-child *ngFor="let hero of heroes"
      [hero]="hero"
      [master]="master">
    </app-hero-child>
  `
})
export class HeroParentComponent {
  heroes = HEROES;
  master = 'Master';
}

hero-child.component.ts

@Component({
  selector: 'app-hero-child',
  template: `
    <h3>{{hero.name}} says:</h3>
    <p>I, {{hero.name}}, am at your service, {{masterName}}.</p>
  `
})
export class HeroChildComponent {
  @Input() hero: Hero;
  @Input('master') masterName: string;
}

ngx-bootstrapThe use of part @Input of the Alert component:

demo/…/alerts/…/basic/basic/html:

<alert type="success" test="123">
    <strong>Well done!</strong> You successfully read this important alert message.
</alert>

src/alert/alert.components.ts:

@Component({
  selector: 'alert,bs-alert',
  templateUrl: './alert.component.html'
})
export class AlertComponent implements OnInit {
  @Input() type = 'warning';
  ...
  ngOnInit(): void {
    console.log('type:'+ this.type);
    ...
  }
  ...
}

2. Question: When I try to change the type = “warning” at base. HTML in ngx-bootstrap to [type]= “warning”, I get no value and the console prints undefined.

Answer 0:

Know the result:
If the attribute does not add [], Angular considers its value to be an unchangeable string, and if [] is added, Angular considers its value to be a variable.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *