Angular Built-In Directives

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