Directives in Angular 7

Updated on 15 February 2020

By Angular Programming

7 min read 12 views

Updated on 15 February 2020

Share this article

Copy Link Link Copied

Directives

Directives are used to change the look and feel of the DOM. Directives basically a class with @Directive decorator. In Angular, there are 3 types of directive

1. Component Directive.

2. Structural Directive.

3. Attribute Directive.

1.Component Directive :

->Component is also a type of directive which contains Template, Style, and Logic. ->You can create the angular Application without components.

Example:

Let first create the component by executing the following command

ng g c demo

When you run the above command in the command line, you will get the following result-

● src/app/demo/demo.component.html

● src/app/demo/demo.component.spec.ts

● src/app/demo/demo.component.ts

● src/app/demo/demo.component.css

● src/app/app.module.ts

Let us check file structure in demo->

demo.component.ts

import { Component, OnInit } from'@angular/core';

@Component{

selector: 'app-demo',

templateUrl: './demo.component.html',

styleUrls: ['./demo.component.css']

}) _{export class DemoComponent implements OnInit {}

constructor() { } ngOnInit() { }

}

● A component selector is a css selector that tells how angular finds this particular component in html page

● templateUrl is path or url of a template file for an angular component

● StyleUrls one or more path or url for files containing css to use in this component

● Inside the @component decorator, we can use template instead of templateUrl and style instead of styleUrls

● A template is an inline html for an angular component

● style is an inline css

demo.component.html

demo works!

2.Structural Directive :

Structural directive basically used for HTML layout. Structural directive change the DOM element by adding or removing the elements from the dom. All Structural directive starts with asteriks(*) sign. For Example *ngIf , *ngFor, etc.

Example

1. _{}This paragraph add in the dom when *ngIf true 

 This paraghraph does not add in the dom when *ngIf false 

2 _{import { Component, OnInit } from'@angular/core';}