What to use built-in directives in Angular for

The list of frameworks and technologies to develop and create applications and websites grows more every day. With the entire world on the internet, companies and different businesses have moved all their sales and advertising processes to the web and that is why different mobile applications and dynamic websites have been born, many of them built with Angular.

Before explaining how a developer can use the guidelines built into this framework, let's define Angular. This technology stands out for offering the developer a good experience, while at the same time offering several quite powerful features as an option, such as deep dependency injection, an expressive database abstraction layer, queues, scheduled jobs, integration tests and unity, and more.

Angular gives a business the ability to have a scalable website with a new design. For a software company, using this framework has several benefits and uses, among which are: creating forums, business portals, crowdfunding platforms, marketplaces, property listings, etc.

Among the large companies that have relied on Angular to develop their websites and applications are GitHub (forum), Google, Forbes, Indiegogo, BMW (price calculator, offer search engine), Deutsche Bank developer portal, Crunchbase, Nike, Xbox, Udacity, YoutubeTV, Firebase, AT&T and Adobe.

Built-in Directives in Angular

Angular's directives allow you to use if statements and for loops, and add other behavior to the HTML code of any project you work with this framework.

Angular directives and their use

1. Nglf: This directive is used when you want to display some HTML block only if it meets certain conditions.
2. Ngfor: Used for when you need a block to iterate multiple times.
3. ngClass: This directive adds conditional styling using a class.
4. ngStyle: add conditional styling on the line.
5. ngModel: This allows you to do the bidirectional binding. This means that you can pass data in both directions between the HTML file and TypeScript.
6. ngSwitch: This directive allows you to add a switch statement with multiple values ​​and cases to select from.

How to use Angular's nglf, ngfor and ngClass directives

nglf

First, add two TypeScript variables to your file:

noPlaylists: boolean = false;
playlists: any = [];
 
builder() { }
 ngOnInit(): void {
 if(this.playlists.length === 0) {
 this.noPlaylists = true;
 }
}

In the HTML, add the *ngfl statement:

<div *ngIf="noPlaylists" class="center">
 <span class="errorMessage">There are no playlists available.</span>
</div>

ngFor

In the TypeScript file add:

playlists: any = [
 {"name": "Rock", "numberOfSongs": 5},
 {"name": "Contemporary", "numberOfSongs": 9},
 {"name": "Popular", "numberOfSongs": 14},
 {"name": "Acoustic", "numberOfSongs": 3},
 {"name": "Wedding Songs", "numberOfSongs": 25},
 {"name": "Metal", "numberOfSongs": 0},
];

In the HTML file add *ngFor

<span class="successMessage">Playlists found.</span>
<div *ngFor="let playlist of playlists" class="item">
 <div class="flex">
 <span>{{playlist.name}}</span>
 <span>{{playlist.numberOfSongs}} songs</span>
 </div>
</div>

ngClass

First, add in the CSS file:

.songs {
 background-color: #F7F5F2;
}
.noSongs {
 background-color: #FFA8A8;
}

Inside the for loop from the previous step, add the ngClass attribute directive.

<div *ngFor="let playlist of playlists" class="item" [ngClass]="playlist.numberOfSongs > 0 ? 'songs' : 'noSongs'">
 <div class="flex">
 <span>{{playlist.name}}</span>
 <span>{{playlist.numberOfSongs}} songs</span>
 </div>
 </div>

With these Angular directives in your application or website, you will have more options for development and design. Our Rootstack experts have used this framework to solve the technical problems of our more than 200 clients worldwide.

We recommend you on video