ngb-alert only works with type="success" or without type

Question

I have this following code which works.

<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide"  (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="success" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>

But if I change to the following it doesn't

<ngb-alert *ngIf="alertError" class="fade animate-show animate-hide" type="danger" (close)="alertError = false"><strong>{{ message }}</strong></ngb-alert>
<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" type="primary" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>

My package.json is like this.

 "dependencies": {
    "@angular/animations": "^4.3.4",
    "@angular/cdk": "^2.0.0-beta.8",
    "@angular/common": "^4.3.4",
    "@angular/core": "^4.3.4",
    "@angular/forms": "^4.3.4",
    "@angular/http": "^4.3.4",
    "@angular/material": "^2.0.0-beta.8",
    "@angular/platform-browser": "^4.3.4",
    "@angular/platform-browser-dynamic": "^4.3.4",
    "@angular/router": "^4.3.4",
    "@ng-bootstrap/ng-bootstrap": "~1.0.0-alpha.30",
    "angular-loader": "^1.6.5",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "primeng": "^4.1.3",
    "rxjs": "^5.4.2",
    "screenshot-desktop": "^1.1.0",
    "underscore": "^1.8.3",
    "zone.js": "^0.8.16"
  },
  "devDependencies": {
    "@angular/cli": "^1.2.7",
    "@angular/compiler": "^4.3.4",
    "@angular/compiler-cli": "^4.3.4",
    "@types/jasmine": "^2.5.53",
    "@types/node": "^8.0.19",
    "codelyzer": "^3.1.2",
    "jasmine-core": "^2.7.0",
    "jasmine-spec-reporter": "^4.1.1",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.2.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "^5.1.2",
    "ts-node": "^3.3.0",
    "tslint": "^5.5.0",
    "typescript": "^2.4.2"
  }

So, can some expert please tell me what's wrong here? Why type primary or danger won't work.

Answer 1

I ran across a similar issue. My problem was that Angular thought I was passing it a variable from which to read the type from. Obviously there was no variable titled primary so it failed. changing things to [type]="'primary'" solved the issue altogether.

<ngb-alert *ngIf="alertSuccess" class="animate-show animate-hide" [type]="'primary'" (close)="alertSuccess = false"><strong>{{ message }}</strong></ngb-alert>