Angular is a JavaScript framework that is used for building web applications. It is one of the most popular frameworks and is used by many big companies. Angular has many features that make it a great choice for web development.
However, there are some less known angular features that every developer should know about.
With these angular features list you can make your code more maintainable and testable. It can also help us improve the performance of our applications. Angular provides very cool feature that we can integerate in our application but there are some less know features of angular that many of us are not aware of.
Every developer knows that Angular is a powerful framework. However, there are some less known features of Angular that every developer should know.
1. Standalone component
@Component({
selector: 'app-book-list',
standalone: true,
imports: [CommonModule, RouterModule, MatButtonModule],
template: `
<section>
<div class="grid-container">
<ng-container *ngFor="let book of bookService?.books; let i = index">
<div class="grid-item" [routerLink]="'/details/' + i">
<h3>{{ book?.name }}</h3>
<img width="200" height="200" [src]="book?.imageUrl" [alt]="book?.name"/>
<div class="">
<button mat-raised-button>Add to cart</button>
</div>
</div>
</ng-container>
</div>
</section>
`,
styles: [
],
})
export class BookListComponent implements OnInit {
constructor(readonly bookService: BooksService) { }
ngOnInit(): void { }
}
2. ngplural
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html'
})
export class AppComponent {
count :number = 5;
}
<span [ngPlural]="count">
<ng-template ngPluralCase="2">there are 2 items.</ng-template>
<ng-template ngPluralCase="one">there is one item.</ng-template>
<ng-template ngPluralCase="=4">there are four items.</ng-template>
<ng-template ngPluralCase="many">there are many items.</ng-template>
<ng-template ngPluralCase="5">there are five items.</ng-template>
<ng-template ngPluralCase="no">there are no items.</ng-template>
</span>
3. Document property of Javascript
import { DOCUMENT } from '@angular/common';
import { Component, Inject } from '@angular/core';
constructor(@Inject(DOCUMENT) documet: Document) {
console.log(document)
}
renderImageElement() {
this.document.getElementById("image")
}
4. Meta tags in angular
import { Meta } from "@angular/platform-browser"
@Component({
...
})
export class TestComponent implements OnInit {
constructor(private meta: Meta) {}
ngOnInit() {
meta.updateTag({name: "title", content: "My title"})
meta.updateTag({name: "description", content: "My page descripton"})
meta.updateTag({name: "image", content: "./assets/profile.jpg"})
meta.updateTag({name: "site", content: "My Site content"})
}
}
5. AppInitializer in angular
function runOnInitilization() {
...
}
@NgModule({
providers: [
{ provide: APP_INITIALIZER, useFactory: runOnInitilization }
]
})
6. Strictly Typed Forms
import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
@Component({
selector: 'app-user',
templateUrl: './user.component.html',
styleUrls: ['./user.component.css'],
})
export class UserComponent {
profileForm = new FormGroup({
firstName: new FormControl('Akash'),
lastName: new FormControl('chauhan'),
mobile: new FormControl('099909888'),
address: new FormGroup({
street: new FormControl('32 street'),
city: new FormControl('chandigarh'),
state: new FormControl('Punjab'),
zip: new FormControl('160019'),
}),
});
populateName() {
this.profileForm.controls.firstName.setValue('Akashminds');
}
7. Template interpolation
@component({
selector: "app"
interpolation: ["((","))"],
template: '
<hello name="(( name ))"> </hello>
',
styleUrls: ["./app.component.css"]
})
export class AppComponent {
name = "Angular " + VERSION.major;
}
Good write-up, I am regular visitor of one抯 website, maintain up the nice operate, and It’s going to be a regular visitor for a long time.
Thanks for posting. I really enjoyed reading it, especially because it addressed my problem. It helped me a lot and I hope it will help others too.
You’ve been great to me. Thank you!
May I request more information on the subject? All of your articles are extremely useful to me. Thank you!
You helped me a lot with this post. I love the subject and I hope you continue to write excellent articles like this.
The articles you write help me a lot and I like the topic
You’ve the most impressive websites.