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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
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.