angular-ng-if

How would I have multiple cases in an *ngIf statement? I'm used to Vue or Angular 1 with having an if , else if , and else , but it seems like Angular 4 only has a true ( if ) and false ( else ) condition. According to the documentation, I can only do: <ng-container *ngIf="foo === 1; then first else second"></ng-container> <ng-template #first>First</ng-template> <ng-template #second>Second</ng-template> <ng-template #third>Third</ng-template> But I want to have multiple conditions (something like): <ng-container *ngIf="foo === 1; then first; foo === 2; then second else third"></ng-container>

I have a button that, when clicked, is replaced with an input field and a confirmation button, then when input is finished it's replaced with the original button again. When that happens, I want it to focus the original button after it appears (some users have requested better support for tab-navigation), but I can't seem to get it to do that consistently. The best I've been able to do is this: // component.html <button #durationButton *ngIf="!enteringDuration" (click)="enterDuration()">Enter Duration</button> <ng-container *ngIf="enteringDuration"> <input type="number" [(ngModel)]="duration"

This question already has an answer here: Hide/show individual items inside ngFor 5 answers Can some one please let me know how to toggle icons while doing ngFor? Problem Statement: I'm using *ngFor to loop through an array and display category names. On click of day I need to open an accordian and show category details (I can do this). Once accordian opens I need to replace fa-plus icon with fa-minus and vice-versa and I need to do this only for clicked day. How can I achieve this effectively? this.categoryList = [ {type: 'space', name: 'Space'}, {type: 'energy', name: 'Energy'}, {type:

If I have the following: <div *ngIf="user$ | async as user" class="container"> <p>user.name</p> </div> Is there a way I can execute code when the div above finally appears on screen? The ngIf will remove that DOM element and all attached components/directives. So you can just write a simple directive that executes an event when it's first created. When the ngIf transitions from false to true the directive will be created (again, and again, etc...) @Directive({selector: '[after-if]'}) export class AfterIfDirective implements AfterContentInit { @Output('after-if') public after: EventEmitter

I have a simple ng-repeat that displays a list of scores and a value of either Positive or Negative. What i am trying to do is when the value is Negative, display a red background CSS class, and when Positive, display a green CSS class. However, for some reason, i am always seeing the red CSS class on my page. HTML: <tr ng-repeat="scores in Test" ng-class="{true: 'warning', false: 'ok'}[scores.Indicator == 'Negative']"> <td>Overall: {{ scores.Indicator }}</td> </tr> CSS: .warning { background: red; } .ok { background: green; } I haven't seen that particular syntax used before, what's the

This question already has an answer here: What are the nuances of scope prototypal / prototypical inheritance in AngularJS? 3 answers I am trying to understand ng-if and scopes. As I am aware, ng-if creates a new child scope. Here is my issue: View <input ng-model="someValue1" /> <div ng-if="!someCondition"> <input ng-model="$parent.someValue2" /> </div> Controller $scope.someCondition = true; if ($scope.someCondition) { $scope.someValue2 = $scope.someValue1; } If someCondition is set to true, then someValue2 should be the same as someValue1. My problem is that I can't access someValue2 in

I have a simple ngFor that loops through an array. However, I've added a condition that while the index is < 5 keep add the tag. and After that, I want to add an extra tag just once that will be used a dropdown to view the rest of the tags. But it doesn't work. <li *ngFor="let tag of module.Tags; let i = index"> <a *ngIf="i<5" href="#" class="span-tag tag">{{ tag }}</a> <div *ngIf="module.Tags.length > 5 && i == 6">DropDown Button</div> </li> The feature here is that I don't want to show unlimited number of tags to the user, I want to limit it to only 5 tags, and have a button after 5 tags