Angular 6: Conditional Rendering with @if
easy⏱ 5 mincourseangular
@if / @else if / @else replace *ngIf
@if (condition) {...} renders its block only when condition is truthy. Chain @else if (other) {...} for more branches, and finish with a plain @else {...} as a catch-all. Because it's template syntax rather than a directive, there's no * prefix and no import needed — it's always available.
@if (status() === 'active') {
<span class="badge green">Active</span>
} @else if (status() === 'trial') {
<span class="badge amber">Trial</span>
} @else {
<span class="badge grey">Inactive</span>
}
Passing data down with input()
A child component declares a signal-based input with status = input<string>('inactive'), and a parent passes a value through a property binding: <app-subscription-badge [status]="currentStatus()" />. Inside the child, status() reads the current value like any other signal — it updates automatically whenever the parent's binding changes.
Build SubscriptionBadge + AppComponent
In SubscriptionBadgeComponent, use @if/@else if/@else on status() to render 'Active', 'Trial', or 'Inactive'. In AppComponent, hold a currentStatus signal, pass it down with [status]="currentStatus()", and add a button that cycles it through the three values.