Build Custom Structural Directive with Angular JS

Prerequisites

Angularj JS new version is using nodejs for setting up application and for running applicaion you will also need any code editor tool.

For current setup we are using visual code studio

Kindly down load latest version of nodejs and visual code studio on your machine and complete setup

Node Installation

1 Go to this site and download latest version of node js

https://nodejs.org/en/

2) Once installed open command prompt and type “node”

you will be able to see version on node js that means nodejs installed

Install Visual Studio

1 Go to this site and download latest version of

https://code.visualstudio.com/

2. Once installed on windows go to search menu and type visual you will be able to see its installed like below screenshot

3.Open Application and you will be able to see below screen

4) Select folder from file menu for your project

5) Open Terminal from Terminal option

Install Angular cli

Run below command

npm install -g @angular/cli

once its installed type below command in terminal to verify installation

Create a workspace and initial application

Run below command

ng new my-app

it will ask for angular routing =>select yes

then select css as style sheer language like below screenshot

Press Enter and it will generate your project

in below diagram 1) Creating html and components from schematics 2) DOwnloading required packages you can see under node_modules folder

Run the application

Run below command

traverse to application folder

cd my-app

run below command to start and open application

ng serve –open

this command will compile app and launch it with webpack on http://localhost:4200/

Congrats your first application is running and working fine

Creating Hello World

In angular data binding is happening between html and component classes .

Here we will declare one variable in component file and same will be visible on UI .

Delete everything from app.component.html.

2. Declare variable in app.component.ts

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'my-app';
  message = 'Hello World';
}

3. Now add binding between UI and component with scriplet tag

app.component.html

<div>

<h1>{{message}}</h1>

</div>

4. Run below command to compile app

ng serve

5. Open browser and enter http://localhost:4200/

Your application is running and rendered “Hello World” in browser. Same way you can initialize variables and pass data from component to UI.

Now we have created hello world application with single component and now we will create additional component which will be useful to add re usability.

Create STRUCTURAL Directive

Use below command to create component

ng generate directive structuraldirective

This command will create below folder structure

This command will also add new directive in declaration section of app.module.ts so it can be reused by other components and get loaded at startup

app.module.ts

Edit structuraldirective.directive.ts

Below is code for structuraldirective.directive.ts

in this code we are getting input as boolean value with directive so we can decide whether to render this element or not

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({
  // tslint:disable-next-line:directive-selector
  selector: '[showeme]'
})
export class StructuraldirectiveDirective {

  constructor(private templateRef: TemplateRef<any>,
              private viewContainer: ViewContainerRef) { }
    
      @Input() set showeme(shouldAdd: boolean) {
      if (shouldAdd) {
                this.viewContainer.createEmbeddedView(this.templateRef);
      } else {

        this.viewContainer.clear();
      }
    }

}

Edit Main page of application

we will use this directive in app.component.html so it will get displayed on front page using app.component.html

app.component.html



<h1>With structural directive showme is true</h1>

<br>
<span>My name is : <span *showeme='true' [style.color]="'red'">James</span></span>


<br>
<h1>With structural directive showme is false</h1>
<br>
<span>My name is : <span *showeme='false'>James</span></span>

As you can see we have used showeme structural directive which will show or hide dom.

In first use we are showing name and in second we are hiding name.

Run below command to compile app

ng serve –open

Open App in browser

use below url to open in browser

http://localhost:4200/

Now you can see in first one showme directive has value true so it printed name “James” and in second one we are passing boolean value as false so its not printed name.

This is how you can create structural directive and use it in project .

GIT REPO:

https://github.com/letsblogcontent/AngularJS/tree/master/newstructuraldirectiveapp

Video Tutorial