DEV Community

Bipon Biswas
Bipon Biswas

Posted on

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
Enter fullscreen mode Exit fullscreen mode

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

http://localhost:4200/
Enter fullscreen mode Exit fullscreen mode

To start the port correctly in your desired port use:

npm start --port 8000 --open
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

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

    }         
}
Enter fullscreen mode Exit fullscreen mode

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'
      }
    }         
}
Enter fullscreen mode Exit fullscreen mode

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() {

    }         
}
Enter fullscreen mode Exit fullscreen mode

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
      }
    }         
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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%' }
 }
Enter fullscreen mode Exit fullscreen mode

Output

Alt Text

Top comments (0)