1 Answer

0 votes
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() {

  this.elementRef.nativeElement.style.backgroundColor = 'green';


Related questions

0 votes
asked Sep 13, 2019 in Angular by ivor2019
0 votes
asked Sep 13, 2019 in Angular by ivor2019