#angularexample

Tutorial on Angular Directives In Angular, a directive is a JavaScript or TypeScript-based class. In Angular, you usually specify it as @directive; there are three directives. The following is a list of our directives:

Angular Component Directives

The main class is made up of component directives. It contains information about how the component should be created, processed, and used at runtime.

Angular Structural Directives

When it comes to structural directives, they're all about manipulating dom elements. Before the directive, there is an asterisk (*) prefix. As examples, we can look at *ngFor and *ngIf.

Angular Attribute Directives

Attribute directives are used to change the behaviour and appearance of the dom element. As seen in the example below, you can create your own directive:

Create Custom Directives in Angular 12

In this section, we'll see a lot more of that. Custom directives are created by the user. We'll examine what we can do to create a custom directive. The Angular command line tool will be used to accomplish this. In the Angular command line tool, type the following command to build a custom directive: ng g directive change-color Change-color.directive.ts and change-color.directive.spec.ts will be generated by the command above. In the process, the app.module.ts file is also modified. When the custom directive is built, it appears like this on the Angular command line tool. ng g directive change-color # CREATE src/app/change-color.directive.spec.ts (245 bytes) # CREATE src/app/change-color.directive.ts (151 bytes) # UPDATE src/app/app.module.ts (406 bytes) app.module.ts The custom directive service "ChangeColorDirective" is imported by default by Angular CLI and defined in the declarations array in the app.module.ts file. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; // Custom directive imported here by Angular CLI import { ChangeColorDirective } from './change-color.directive'; @NgModule({ declarations: , imports: , providers: , bootstrap: }) export class AppModule { }

Example of Custom Angular Directive File

A selector property and a directive are stored in the change-color.directive.ts file. Because we assign the custom directive to the view, the things we define in the selector must match in the view. import { Directive } from '@angular/core'; @Directive({ selector: '' }) export class ChangeColorDirective { constructor() { } }

Let’s Create Custom Angular Directive Logic

// Required services for custom directives import { Directive, ElementRef, Renderer2 } from '@angular/core'; @Directive({ selector: '' // Directive selector }) export class ChangeColorDirective { constructor(elem: ElementRef, renderer: Renderer2) { renderer.setStyle(elem.nativeElement, 'color', 'blue'); } } As seen below, add the appChangeColor directive to the app.component.html view - // appChangeColor custom Directive

I got colored by Angular Custom Directive

In this Angular tutorial, we'll go over the concept of data binding. You'll also learn how to tie data in an Angular web application to show on the UI using curly brackets.

Use Interpolation in Angular 13 Data Binding

Since AngularJS 1.0, data binding has been a feature of the framework. Curly braces are used in the code to represent data binding - {{variable goes here}} – and this process is known as interpolation. A variable named {{ title }} exists in the app.component.html file. The value of this variable is set in the app.component.ts file. We'll show the value in app.component.html later. Our goal is to have the automobiles appear in a dropdown menu in the browser. We'll use the code segment listed below to accomplish this. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: }) export class AppComponent { // Title variable declared title = 'My Angular App'; // Defined cars array cars = ; } To begin, we'll make a standard select tag with an option. We've chosen to use the *ngFor loop as a tool. Using this *ngFor loop, we will iterate through the array of automobiles. As a result, an option tag will be produced with the values from the drop-down. In Angular, we'll use the following syntax – *ngFor = "let i for automobiles." The tag {{ i }} is used to retrieve the value of automobiles. For data binding, we need two curly brackets, as previously explained. You declare the variables in the app.component.ts file. Curly brackets are used to retrieve the values afterwards.

Welcome to {{ title }}!

Cars : {{i}} Now we'll open the browser and see the output of the above array of automobiles. The variable is stored in app.component.ts, and the value of the variable is retrieved using curly brackets in app.component.html - for example {{ }}. When utilising Angular Data Binding, how do you use an If Statement? It's past time for us to display info in the browser based on the condition. We've just created a variable and given it the value 'true.' We'll use the if statement to show/hide the data that will be displayed. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: }) export class AppComponent { // isPresent var is declared isPresent:boolean = true; // Title variable declared title = 'My Angular App'; // Defined cars array cars = ; }

Welcome to {{ title }}!

Cars : {{i}} Statement is true. Show me because isPresent is set to true.

If then Else using Angular 13 Data Binding

The variable isPresent will have the value 'false' assigned to it. import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: }) export class AppComponent { // isPresent var is declared isPresent:boolean = false; // Title variable declared title = 'My Angular App'; // Defined cars array cars = ; } We'll use ng-template to display the else condition, as shown below.

Welcome to {{ title }}!

Cars : {{i}} Statement is true. NgTemplate condition is working!

Another If then Else Example

In Angular, what is NgModule? If you're seeking for a quick definition of the Angular 12 Module, we may state that NgModule is a decorator that groups all of your Angular application's services, pipelines, directives, and components. Using the example of website development, we can say that a module will contain the footer, header, right section, centre section, and left section. You can define a module with NgModule. When you use the Angular CLI command to create a new project, NgModule is generated by default in the app.module.ts file. And it looks like this: import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; // NgModule Angular service import { AppComponent } from './app.component'; import { NewComponentComponent } from './new-component/new-component.component'; @NgModule({ // NgModule decorator groups services, components, pipes and directives declarations: , imports: , providers: , bootstrap: }) export class AppModule { } As shown in the sample below, you must import NgModule. import { NgModule } from '@angular/core'; Take a look at the structure of the NgModule below  @NgModule({ declarations: , imports: , providers: , // To make your service globally available register in the providers array bootstrap: }) It all starts with @NgModule. It also has an object with bootstrap, providers, imports, and declarations in it.

Declaration

A declaration is a collection of components in basic language. Whenever you use the Angular CLI to create a new component. By default, Angular CLI adds the newly generated component to the declarations array. Declarations will include a reference to this component, as explained below. declarations:

Imports

The Imports array in an Angular application is a collection of modules that are required to run the application. We can further explain it using an example. The @NgModule Browser Module has already been imported, as you can see. If the application requires reactive forms and router service, you can include the module as shown below. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { ReactiveFormsModule } from "@angular/forms"; import { RouterModule } from "@angular/router"; @NgModule({ declarations: , imports: , providers: , bootstrap: })

Providers

If you wish to make your app's services globally available, declare custom services in the providers' array. The following are the services that will be provided. import { NgModule } from '@angular/core'; import { CartService } from './cart.service'; @NgModule({ providers: , }) export class UserModule { }

Bootstrap