What is the purpose of the ViewChild decorator in this component class?

June 25, 2021June 25, 2021 Team PaTeam Pa 0 Comment
@Component({
    . . .
    template: ‘<p #bio></p>’
})
export class UserDetailsComponent {
    @ViewChild(‘bio’) bio;
}
  •  It provides access from within the component class to the ElementRef object for the <p> tag that has the bio template reference variable in the component’s template view.
  •  It indicates that the <p> tag be rendered as a child of the parent view that uses this component.
  •  It makes the <p> tag in the template support content projection.
  •  It makes the <p> tag visible in the final render. If the #bio was used in the template and the @ViewChild was not used in the class, then Angular would automatically hide the <p> tag that has #bio on it.

Leave a Reply

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

Related Posts

Based on the following usage of the async pipe, and assuming the users class field is an Observable, how many subscriptions to the users Observable are being made?Based on the following usage of the async pipe, and assuming the users class field is an Observable, how many subscriptions to the users Observable are being made?

<h2>Names</h2> <div *ngFor=”let user of users | async”>{{ user.name }}</div> <h2>Ages</h2> <div *ngFor=”let user of users | async”>{{ user.age }}</div>[...]

READ MOREREAD MORE

Based on the following component, what template syntax would you use to bind the TitleCardComponent’s titleText field to the h1 element title property?Based on the following component, what template syntax would you use to bind the TitleCardComponent’s titleText field to the h1 element title property?

@Component({     selector: ‘app-title-card’,     template: ‘<h1 title=”User Data”> {{titleText}}</h1>’ }) export class TitleCardComponent {     titleText[...]

READ MOREREAD MORE