Angular Learning
Tags: javascript, angular, webdev, devjournal
Published: 2021-04-07 06:16:10

On my journey, today I learned about the directives.

## What is a directive

It can be defined as an instructions which tells to change the DOM. It can be for :

* Component : Directives with a template

* Structure : Change the structure of the elements.

* Attribute : Change the appearence or behavior of elements.

A sample example code :

```
<p appTurnGreen>Background will turn to green</p>


Inside the component.ts file
@Directive({
      selector: '[appTurnGreen]'
```

## Inbuilt Directives : 

1) **ngIf** : This directive is used to output the data conditionally.
A code example for `ngIf`

```
<label>Server Name</label>
<!-- <input type="text" class="form-control" (input)="onUpdateServerName($event)">  Access to event data -->

<input type="text" class="form-control" [(ngModel)]="serverName"> <!-- Two way binding -->

 <!-- <p>{{ serverName }}</p> -->
<button 
class="btn btn-primary" 
[disabled]="!allowNewServer"
(click)="onCreateServer()"> 

<!-- <p [innerText]="allowNewServer"></p> -->
<!-- <p> {{ serverCreationStatus }}</p> -->

<p *ngIf="serverCreated">Server was created with name {{ serverName }}</p>
```
> We have to use * in front of the `ngIf`.

It needs to output the servername after typing a name on the input text and then clicking the button. We also need to configure the component.ts file

```
export class ServersComponent implements OnInit {
	allowNewServer = false;
	serverName = 'TestServer';
	serverCreated = false;

  constructor() { 
  	setTimeout(() => { 
  		this.allowNewServer = true;
  	},2000);
  }

  ngOnInit(): void {
  }

  onCreateServer() {
  	this.serverCreationStatus = this.serverName + ' Server was created';
  	this.serverCreated = true;
  }

  onUpdateServerName(event: any) {
  	this.serverName = (<HTMLInputElement>event.target).value;
  }

}
```
![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2473y1vpu0ckfy2ga3j.png)
 


2. **ngStyle** and **ngClass** : 

`ngStyle` is used for styling elements dynamically.
`ngClass` is used to apply CSS classes dynamically.

```
<p [ngStyle]="{ backgroundColor: getColor() }"
[ngClass]="{ online: serverStatus === 'online'}">Inside the {{'Rohith server'}} component with ID {{ serverId }} and status {{ getServerStatus() }}</p>
```

> Here we wrap `ngClass` and `ngStyle` inside square brackets as we apply property binding.

```
@Component({
	selector: 'app-server',
	templateUrl: './server.component.html',
	styles: [`
	.online {
		color: white;
	}
	`]
})
export class ServerComponent {
	serverId: number = 10;
	serverStatus: string = 'offline';

	constructor() {
		this.serverStatus = Math.random() > 0.5 ? 'online' : 'offline';
	}
	
	getServerStatus() {
		return this.serverStatus;
	}

	getColor() {
		return this.serverStatus === 'online' ? 'green' : 'red';
	}
}
```
![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1fbs6bnag96ggwgbyja.png)

3. **ngFor** : 
This is generally used for outputting the list.
```
<app-server *ngFor="let server of servers"></app-server>
```
> * needs to be used infront of ngFor as it is a structural directive.

```
@Component({
  // selector: 'app-servers', // by element
  // selector: '[app-servers]', // by attribute
  selector: '.app-servers', // by class
  templateUrl: './servers.component.html',
  styleUrls: ['./servers.component.css']
})
export class ServersComponent implements OnInit {
	allowNewServer = false;
	serverCreationStatus = 'No server was created'
	serverName = 'TestServer';
	serverCreated = false;
	servers = ['TestServer', 'TestServer2']

  constructor() { 
  	setTimeout(() => { 
  		this.allowNewServer = true;
  	},2000);
  }

  ngOnInit(): void {
  }

  onCreateServer() {
  	this.serverCreationStatus = this.serverName + ' Server was created';
  	this.serverCreated = true;
  	this.servers.push(this.serverName);
  }

  onUpdateServerName(event: any) {
  	this.serverName = (<HTMLInputElement>event.target).value;
  }

}
```

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s4g411pr2e728nzu7sgr.png)

## Github Repo : 
[Angular Study](https://github.com/Rohithv07/AngularStudy) 

Till now I learned about components, data binding, directives and moving forward with doing a sample project.