Sep 13, 2019 in Angular
Q: Angular Directives

1 Answer

0 votes
Sep 13, 2019
Difference between Attribute Directive and Structural Directive

Attribute Directives Structural Directives

Attribute directives look like a normal HTML Attribute and mainly used in databinding and event binding. Structural Directives start with a * symbol and look different.

Attribute Directives affect only the element they are added to. Structural Directives affect the whole area in the DOM.

How to create custom Directives?

You can create your own custom directives to use in Angular components.

Create a basic attribute directive

You have seen the attribute directive like ngClass and ngStyle. Now, it's time to create our own attribute directives.

First, create a folder. Let's name it "simple-style". Then, create a file within that folder named as "simple-style.directive.ts"

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

 @Directive( {

  selector: '[appSimpleStyle]'


export class SimpleStyleDirective implements OnInit {

  constructor(private elementRef: ElementRef) {


  ngOnInit() { = 'green';

Click here to read more about Angular JS
Click here to read more about Insurance

Related questions

0 votes
Sep 13, 2019 in Angular