Directives in Angular 7 - Study24x7
Social learning Network
study24x7

Default error msg

Login

New to Study24x7 ? Join Now
Already have an account? Login
googlePlay app_img

Directives in Angular 7

Updated on 15 February 2020
study24x7
Angular Programming
7 min read 12 views
Updated on 15 February 2020
Share this article
Copy Link Link Copied
NAT Banner

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

<p>

demo works!

</p>


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. <p *ngIf=”true”> This paragraph add in the dom when *ngIf true </p>

<p *ngIf=”false”> This paraghraph does not add in the dom when *ngIf false </p>

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

@Component{

selector: 'app-demo',

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

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

}) export class DemoComponent implements OnInit {

data = [1,2,3,4,5,6];

constructor() { } ngOnInit() { }

} <ul> <li *ngFor=”let item of data ”>

{{item}} </li> </ul>


3.Attribute Directive :


An attribute directive is used to change the appearance of a DOM element or component. For Example ngStyle and ngClass.

->NgStyle is used to change the javascript object into the style attribute. ->NgClass is used to translate the object into the class attribute.

Example

<p [ngStyle]=”{‘color’:’red’}’’> Paraghraph with red color </p>

<p [ngClass]=”{‘my-class’:isTrue}’’>

When the isTrue variable contains the true value then my-class add on the p tag </p>


How to Create Custom Directives?


In this topic, we create a custom directive and use it with the component to change the text.


The command for generating the custom directive

ng generate directive directiveName

OR ng g d directiveName


Example

ng g d changeTextDirective

● src/app/change-text-directive.directive.spec.ts

● src/app/change-text-directive.directive.ts

● src/app/app.module.ts


change-text-directive.directive.ts


// Step -1-> import { Directive, ElementRef} from '@angular/core';


// Step -2-> @Directive({

selector: '[appChangeTextDirective]' })


// Step -3-> export class ChangeTextDirectiveDirective {

constructor(Element: ElementRef) {

Element.nativeElement.innerText = "Text is changed by change Directive.";

} } demo-cmp.component.html

<p appChangeTextDirective>

demo-cpm works!

</p>

Mainframe Development Software Quality IIT-JEE
Like| 2 Comment | 1
study24x7
Write a comment...
Trending Articles

Best Study timetable for class 8th students

By CBSE CLASS 8

HOW TO WRITE CERTIFICATE SECTION FOR CLASS XII SCHOOL PROJE...

By Edubabble LLP

Best topic ideas for class 7 Science projects

By CBSE CLASS 7

The best daily routine for class 8 students

By CBSE CLASS 8
Featured Courses
Related Posts

Check these related articles on Study24x7

How to choose the best Online Learning platform for students?
7 min read 78 views

With the growing demand and trend in online education, many schools and colleges have started adopting the online approach. We can say that online edu

Study24x7

1218 followers

Why Coding is Important for School Students | New Education Policy
20 min read 47 views

We are in the 21st century where technology is playing a crucial role in our everyday lives. One such lucrative skills that have become important toda

Study24x7

1218 followers

BIG DATA
7 min read 12 views

What is Data? The quantities, characters, or symbols on which operations are performed by a computer, which may be stored and transmitted in the form

Neesha Choudhary

97 followers

Use of Drones- Good or Bad?
7 min read 17 views

A drone or a UAV (unmanned aerial vehicle) refers to a pilotless, mini or large aircraft that operates through the combination of various technologies

Bsc Courses

17 followers

How does electricity flow through water?
6 min read 330 views

To start, electricity is the flow of charged particles. Typically, it’s the flow of electrons through a wire that we think of, but any charged particl

Curious Mind

298 followers

What new hubs and spokes will develop in global transportation networks?
7 min read 3 views

Hyperloop is on track to become the fastest-growing mode of transport. A Hyperloop is a proposed mode of passenger and freight transportation, fir

Revolution 2030

28 followers

J meter
6 min read 1 views

J Meter It can be used to simulate a heavy load on a server, group of servers, network or object to test its strength or to analyze overall performan

Neesha Choudhary

97 followers

Professional career options after BSC Course
6 min read 6 views

Innovations and studies in Sciences make us know things which we didn’t know a century ago. If you wish to continue this legacy, then pursuing a BSc C

Bsc Courses

17 followers

Share this article
Copy Link Link Copied