Angular Built-In Directives
Tags: directive, angular
Published: 2020-11-24 11:46:23

---
title: Angular Built-In Directives
published: true
description: Built-in directives in Angular
tags: directive, angular
//cover_image: https://direct_url_to_image.jpg
---

**Objective**: In this article, you will use the built-in directives in Angular to change the appearance of your view.

**Pre-requisite** Prior to completing this article, you should have already installed all pre-requisite tooling including: Visual Studio Code, Node Package Manager (NPM), Node, Angular CLI.

**Setup**

1. On your local machine, open Visual Studio Code.
2. Go to the File menu and select the Open Folder option.
3. Create a new project for this exercise and select this folder.
4. Create a new project command: **ng new angular-medium**
5. Create a new project: open terminal by **Ctrl + backtic(`)** key then run **ng new angular-medium** command


**Bootstrapping Your Environment**

1. In Visual Studio Code, **Ctrl + backtic(`)** key press and select the Open in Terminal option.
2. Run the **angular-medium** project using npm:

```
npm start
```

Now you can see the project from here. This is default url.

```
http://localhost:4200/
```

To start the port correctly in your desired port use:

```
npm start --port 8000 --open
```

**Add Properties to the AppComponent Class**

1. Within the **app** folder, open the **app.component.ts** file.
2. Within the **AppComponent** class, add a new property of type **boolean** named **showPanel** with a value of **true**:

```
export class AppComponent {
    public showPanel : boolean = true;
}
```

3.Within the AppComponent class, add a new method named getStyles:

```
export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {

    }         
}
```

4.Update the getStyles method to return a JSON object with the following properties and values:

* font-weight: bold
* font-style: italic

```
export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }         
}
```

5.Within the AppComponent class, add a new method named getClasses:

```
export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }  
    public getClasses() {

    }         
}
```

6.Update the **getClasses** method to return a JSON object with the following properties and values:

* highlight: true
* strike: false

```
export class AppComponent {
    public showPanel : boolean = true;
    public getStyles() {
      return {
          'font-style': 'italic',
          'font-weight': 'bold'
      }
    }  
    public getClasses() {
      return {
          'highlight': true,
          'strike': false
      }
    }         
}
```

**Create the CSS Styles**

1. Within the **app/views** folder, open the **app.component.html** file.
2. Within the **style** element, add a CSS class named **highlight** that sets the background-color to yellow and also more into **app.component.css** file

```
.highlight {
    background-color: yellow;
}
.text-green {
    color: green;
}
.text-red {
    color: red;
}
.bold{
    font-weight: 700;
}
.strike {
    text-decoration: line-through;
}
```

3.Within the **p** element, create a new **label** element with the **for** attribute set to **showPanelCheck** and the content Show Panel?:

```
<p>
    <label for="showPanelCheck">Show Panel?</label>
</p>
```

4.Within the **p** element, create a new **input** element with the **id** set to **showPanelCheck** and type set to **checkbox**:

```
<p>
    <label for="showPanelCheck">Show Panel?</label>
    <input id="showPanelCheck" type="checkbox" />
</p>
```

5.Update the **input** element by setting it’s model to the **showPanel** property of the component class:

```
<p>
    <label for="showPanelCheck">Show Panel?</label>
    <input id="showPanelCheck" type="checkbox" [(ngModel)]="showPanel" />
</p>
```

6.Create a new **p** element with the content Panel is Shown. Update the **p** element by using the **ngIf** directive and binding it to the **showPanel** property of the component class:

```
<p *ngIf="showPanel">
   Dummy Panel is Shown
</p>
```

7.Create a new **p** element with the content Custom Classes. Update the **p** element by using the **ngClass** directive and binding it to the **getClasses** method of the component class:

```
<p [ngClass]="getClasses()">
    Dummy Custom Classes
</p>
```

8.Create a new **p** element with the content Panel is Shown. Update the **p** element by using the **ngStyle** directive and binding it to the **getStyles** property of the component class:

```
<p [ngStyle]="getStyles()">
    Dummy Custom Styles
</p>
```

9.Sometimes few flag come from backend then using this bellow way

**Another Example**

```
<div [ngClass]="clinicStatusClass()">
    Emergency
</div>
<div [ngStyle]="patientInfoStyle()">
    Patient Allergy
</div>
```

**app.component.ts**

```
clinicStatusClass() {
  if (this.patientConsultation.ClinicTypeText !== 'Emergency') {
    return ['text-green', 'bold']
  } else if (this.patientConsultation.ClinicTypeText === 'Emergency') {
    return ['text-red', 'bold']
}
return []
}
patientInfoStyle(): any {
  return { display: 'block', margin: '0 7px', 'min-height': '215px', width: '100%' }
 }
```

**Output**

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zczhkfsq33ixcgkcenm5.png)