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
- On your local machine, open Visual Studio Code.
- Go to the File menu and select the Open Folder option.
- Create a new project for this exercise and select this folder.
- Create a new project command: ng new angular-medium
- Create a new project: open terminal by Ctrl + backtic(`) key then run ng new angular-medium command
Bootstrapping Your Environment
- In Visual Studio Code, Ctrl + backtic(`) key press and select the Open in Terminal option.
- 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
- Within the app folder, open the app.component.ts file.
- 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
- Within the app/views folder, open the app.component.html file.
- 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
Top comments (0)