Understanding Of angular 4 Directives

Posted By : Monu Thakur | 29-Sep-2017

The angle directives is similar to the component. This tutorial explains the main difference between the directives and the corner component Angular 4 and gives a quick example of how to write a command in Angular 4.

 

 

Angular 4 Directive vs Component

According to angular documentation, the component is really another form of instruction. There are three types of guidelines:

 

 

Components

The components are brief instructions with their own model.

 

 

Structural Directives

The structural directives modify the provision of the DOM by adding and deleting elements.

 

 

Attribute directives

These directives alter the appearance or behavior of certain elements or components.

 

 

Because the components are technical instructions, the "components / commands" arguments become misleading. As a best practice, use the components when you want to create a new DOM element with their own HTML template. Use attribute statements when you want to modify or modify an existing DOM element. You can also consult our angular component tutorial for more information.

 

Angular 4 Directive Example

We will show you how to make itineraries easy to use. Assuming you have installed CLI Angular, create a new Corner project by running:

 

 

ng new angularDirectives

This will create a new Angular project called angularDirectives with all the configurations required to run your application locally. To generate your first directive using CLI, run:

 

 

ng g directive bigText
This will generate some files and perform some configuration for the new bigText command, including:

 

 

Create the main big-text.directive.ts file under the src/app/ directory
Create the big-text.directive.spec.ts file for unit testing under the src/app directory
Add the necessary imports and declarations in the root module, app.module.ts

 

 

Writing an Angular 4 custom directive

 

Now that you have the required files, it's time to make your new BigTextDirective do things. Go to the large-text.directive.ts file and replace its contents with the following:

 

 

import { Directive, ElementRef } from '@angular/core';

@Directive({ selector: '[appBigText]' })
export class BigTextDirective {
    constructor(el: ElementRef) {
        el.nativeElement.style.fontSize = '100px'
    }
}

 

 

This command will find all DOM elements with the appBigText attribute and change the font size to 100px. Easily reference the items in the builder function (), you import the ElementRef module and the Sponsors of the @ corner / core library.

 

 

Note how these attributes are defined in @Directive decorators via the voter properties. Also note how the font size of the element increases in the constructor function via el.nativeElement.style.fontSize = "100px".

 

Thanks

About Author

Author Image
Monu Thakur

Monu is an experienced Frontend Developer, having good knowledge of Photoshop, illustrator, HTML5, CSS3, Less, Sass, Javascript, Jquery, Angular 4, Angular 4 theme integration.

Request for Proposal

Name is required

Comment is required

Sending message..