Skip to content

Instantly share code, notes, and snippets.

View kevinchisholm's full-sized avatar

Kevin Chisholm kevinchisholm

View GitHub Profile
<app-test-component></app-test-component>
<div [ngClass]="{ 'without-number': formEntry.phone === null, 'named-john': formEntry.name === 'John Doe' }">
<p appTestDirective *ngIf="formEntry.name">The name is {{formEntry.name}} </p>
<p appTestDirective *ngIf="formEntry.address">The address is {{formEntry.address}} </p>
<ng-template [ngIf] = "formEntry.phone">
<p>The phone number is</p>
<p> {{formEntry.phone}} </p>
</ng-template>
import {
Directive,
Input,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector: '[appTestDirective]'
})
import {
Directive,
Input,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector: '[appTestDirective]'
})
import {
Directive,
Input,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector: '[appTestDirective]'
})
import {
Directive,
Input,
ElementRef,
HostListener
} from '@angular/core';
@Directive({
selector: '[appTestDirective]'
})
.without-number {
color: red;
}
.named-john {
color:blue;
}
<div [ngClass]="{ 'without-number': formEntry.phone === null, 'named-john': formEntry.name === 'John Doe' }">
<p *ngIf="formEntry.name">The name is {{formEntry.name}} </p>
<p *ngIf="formEntry.address">The address is {{formEntry.address}} </p>
<ng-template [ngIf] = "formEntry.phone">
<p>The phone number is</p>
<p> {{formEntry.phone}} </p>
</ng-template>
</div>
<div [ngClass]="{ 'without-number': formEntry.phone === null }">
<p *ngIf="formEntry.name">The name is {{formEntry.name}} </p>
<p *ngIf="formEntry.address">The address is {{formEntry.address}} </p>
<ng-template [ngIf] = "formEntry.phone">
<p>The phone number is</p>
<p> {{formEntry.phone}} </p>
</ng-template>
</div>