TheDeveloperBlog.com

Home | Contact Us

C-Sharp | Java | Python | Swift | GO | WPF | Ruby | Scala | F# | JavaScript | SQL | PHP | Angular | HTML

Angular 7 Directives

Angular 7 Directives with angular7, tutorial, introduction, angular, js, Installation, History and Versions, First App, files explanation, Components, Directives, ngIf Directive, ngFor Directive, ngClassDirective, ngStyle Directive, Angular7 with Bootstrap etc.

<< Back to ANGULAR

Angular 7 Directives

Directives are instructions in the DOM. They specify how to place your components and business logic in the Angular.

Directives are js class and declared as @directive. There are 3 directives in Angular.

  • Component Directives
  • Structural Directives
  • Attribute Directives

Component Directives: Component directives are used in main class. They contain the detail of how the component should be processed, instantiated and used at runtime.

Structural Directives: Structural directives start with a * sign. These directives are used to manipulate and change the structure of the DOM elements. For example, *ngIf and *ngFor.

Attribute Directives: Attribute directives are used to change the look and behavior of the DOM elements. For example: ngClass, ngStyle etc.

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';
  }

Now, you have to inform Angular that you have a new directive. So, you have to add SimpleStyleDirective to app.module.ts and also import it.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {SimpleStyleDirective} from './simple-style/simple-style.directive';

@NgModule({
  declarations: [
    AppComponent,
    SimpleStyleDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, your directive is created. Let's check it. Open app.component.html and use your created SimpleStyleDirective

<p appSimpleStyle>Style me with your created SimpleStyleDirective</p>

Related Links:


Related Links

Adjectives Ado Ai Android Angular Antonyms Apache Articles Asp Autocad Automata Aws Azure Basic Binary Bitcoin Blockchain C Cassandra Change Coa Computer Control Cpp Create Creating C-Sharp Cyber Daa Data Dbms Deletion Devops Difference Discrete Es6 Ethical Examples Features Firebase Flutter Fs Git Go Hbase History Hive Hiveql How Html Idioms Insertion Installing Ios Java Joomla Js Kafka Kali Laravel Logical Machine Matlab Matrix Mongodb Mysql One Opencv Oracle Ordering Os Pandas Php Pig Pl Postgresql Powershell Prepositions Program Python React Ruby Scala Selecting Selenium Sentence Seo Sharepoint Software Spellings Spotting Spring Sql Sqlite Sqoop Svn Swift Synonyms Talend Testng Types Uml Unity Vbnet Verbal Webdriver What Wpf