[Angular] @ViewChild and template #refs to get Element Ref

We can use @ViewChild with component:

@ViewChild(AuthMessageComponent) message: AuthMessageComponent;

//....

 ngAfterContentInit() {
    if (this.message) {
      this.message.days = 30;
    }
  }

By doing this, we actually can access component‘s prop and events.

If we want to get component DOM node, what we can do is using template ref.

<input type="email" name="email" ngModel #email>
@ViewChild(‘email‘) email: ElementRef;

// ....

  ngAfterViewInit() {
    console.log(this.email); // ElementRef
  }

时间: 2024-10-21 19:33:47

[Angular] @ViewChild and template #refs to get Element Ref的相关文章

[Angular] ViewChild &#39;read&#39; option

It is not clear in the Docs about {read: xx} option for @ViewChild. Based on the Source code, @ViewChild as view as Component, ElementRef, TemplateRef. For example, we have: <one></one> @ViewChild(OneComponent) one: OneComponent; ngAfterViewIn

[Angular 2] Create template with Params

Angular 2 templates have a special let syntax that allows you to define and pass a context when they’re being generated. import {Component, ViewChild, ViewContainerRef, ComponentFactoryResolver, ViewChild} from '@angular/core'; import {SimpleService}

[Angular] Test component template

Component: import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output } from '@angular/core'; @Component({ selector: 'stock-counter', changeDetection: ChangeDetectionStrategy.OnPush, template: ` <div class="stock-counter"> &l

[Angular 2] Passing Template Input Values to Reducers

Angular 2 allows you to pass values from inputs simply by referencing them in the template and passing them into your Subject.next() call. This lesson shows you how to make a number input and pass the value so you can configure how much you want the

[Angular 2] Share Template Content In Another Template With Content Projection &lt;ng-content&gt;

Angular 1 provided a mechanism to place content from your template inside of another template called transclusion. This concept has been brought into Angular 2 and was renamed to content projection and given super powers. In this lesson learn how to

Angular Viewchild undefined

Angular的viewchild在使用的时候报错 undefined 1 检查是否在元素上打上标识 #xxx 2 查看引用元素时的时机 是否在AfterViewInit之后 3 检查元素是否在*ngIf="false"之内 参考: 1 https://stackoverflow.com/questions/34947154/angular-2-viewchild-annotation-returns-undefined 原文地址:https://www.cnblogs.com/wol

[Angular 9] Built-in template syntax $any

The $any() type cast function Sometimes a binding expression triggers a type error during AOT compilation and it is not possible or difficult to fully specify the type. To silence the error, you can use the $any() cast function to cast the expression

[Angular Tutorial] 1-Static Template

为了说明Angular如何扩展了标准的html,您将会创建了一个纯粹的静态html页面,并且看到我们如何将这些html代码转换成Angular能动态展示的模板. 在这一步您将会在一个html页面中添加两部手机的基本信息. ·这个页面现在包含一个有两部手机的基本信息名单. 最重要的不同被列在了下面,您可以点击这里在GitHub上查看全部的不同. app/index.html: <ul> <li> <span>Nexus S</span> <p> F

Angular 2 中的 ViewChild 和 ViewChildren

https://segmentfault.com/a/1190000008695459 ViewChild ViewChild 是属性装饰器,用来从模板视图中获取匹配的元素.视图查询在 ngAfterViewInit 钩子函数调用前完成,因此在 ngAfterViewInit 钩子函数中,才能正确获取查询的元素. @ViewChild 使用模板变量名 import { Component, ElementRef, ViewChild, AfterViewInit } from '@angular