Angular: Routing
Understand the basics of Angular routing and review core concepts and internal architecture.
The viewChild is a decorator used by Angular to access the first element of a matched selector. This can be used to reference a certain element inside a component’s template.
To place a Template Reference Variables (also known as local references) in an element the #ref-name form should be used. The viewChild will search for matches across the local references placed on a template. An example of direct access to a DOM element using viewChild and local references:
<div>
<span #item> Text of the span </span>
<div>
export class AppComponent implements AfterViewInit {
// Get the DOM element
@ViewChild( 'item', { read: ElementRef } )
private element: ElementRef;
ngAfterViewInit() {
// Access the innerHTML property of the nativeElement
console.log( this.element.nativeElement.innerHTML );
}
}
For any component used inside an application, Angular compiles it and generate a factory view for all its properties. The DOM elements are a representation of the properties contained under that factory view. Any changes or removals applied directly into a DOM element will not have an effect on the factory view thus creating a void gap on the internal template-view relation.
That is one reason why accessing the DOM elements directly is discouraged by Angular. Another reason is that there are platforms, such as servers or web workers, that do not support native access to the elements and create rendering errors.
The alternatives that Angular offers to access the values and properties of an element are to either implement templating and data-binding or use their native API under the Renderer 2 class.
Understand the basics of Angular routing and review core concepts and internal architecture.
Angular is one of the most advanced JavaScript frameworks at the moment. Been able to create nested routings based on modules is key to design an easy to scale Angular application.
Updating Angular projects on a regular basis is very important. This article covers how to update Angular to version 11 from version 7. It also provides information about new features on Angular 11.