Categorieën: Alle - components - services

door Anton Alexeyevich 2 jaren geleden

360

Directives & Components

The provided content outlines various Angular directives and components, focusing on annotations related to querying elements in the template or projected content. The annotations include `@

Directives & Components

Directives & Components Anton Korniychuk

Annotations

read
@ViewChild('myname', { read: ViewContainerRef }) target; - ViewContainerRef - ElementRef - Component or Directive name
descendants
@ContentChildren() // is the only one that allows to also query for descendants @ContentChildren(SomeTypeOrVarName, {descendants: true}) someField; *true // for ViewChild & ViewChildren *false // for ContentChild & ContentChildren
@ViewChild() // supports directive or component type as parameter, or the name (string) of a template variable. @ViewChildren() // also supports a list of names as comma separated list (currently no spaces allowed @ViewChildren('var1,var2,var3')). @ContentChild() and @ContentChildren() // do the same but in the light DOM ( projected elements).

examples

// html // annotations @ViewChild(MyComponent) component: MyComponent; @ViewChild(MyDirective) directive: MyDirective; @ViewChild('domElName') el: ElementRef; @ViewChild('domElName', { read: ViewContainerRef }) ref: ViewContainerRef;

{{ message }}

// hello
// html // annotation @ViewChild('myname') input; // value ngAfterViewInit() { console.log(this.input.nativeElement.value); }

Services

TemplateRef ViewContainerRef ElementRef

Component

ng-content ng-container ng-template template // deprecated