Angular Bootstrap UI Boot Warning Closes

Question

I am using Angular UI Bootstrap to create warning fields using the following code:

<alert data-ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</alert>

It displays as expected:

My question is: Is there a way to make some of the notifications closed and others not, depending on the variable?

I wrote this mock code and want to display this lockable xonly when closeablethere is one true.

$scope.alerts = [
    { type: 'danger', closeable: false, msg: 'Oh snap! Change a few things up and try submitting again.' },
    { type: 'success', closeable: true, msg: 'Well done! You successfully read this important alert message.' },
    { type: 'warning', closeable: false, msg: 'Be careful! Something may go wrong here.' },
    { type: 'info', closeable: true, msg: 'Attention! Here is some news for you.' }
];

Answer 1

try it for your cross

<button type="button" class="close" data-dismiss="alert" ng-if="alert.closable">
<span aria-hidden="true">&times;  </span><span class="sr-only">Close</span></button>

Answer 2

Yes, you can use ng-show / ng-if to bind the close button to your model:

<button ng-show="alert.closeable" type="button" class="close" 
     data-dismiss="alert"><span aria-hidden="true">&times;
     </span><span class="sr-only">Close</span>
</button>

Answer 3

Angular 2 (Typescript): .

template.component.ts

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'template-ditor',
  templateUrl: './template.component.html',
})
export class TemplateComponent implements OnInit {
  private content: string;
  // predefined parameters with initial values
  // make it private, invisible to other classes
  private isAlert: boolean = false;
  private alertMsg: string='Alert Message';
  private alertHeading: string = 'Error !'
  private alertTyp: string = 'danger'
  constructor() {}

  // when a form is submitted, display alert with alertHeading, alertMsg, alertTyp
  onSubmit() {
  // pass values and api response messages.
  // passing isAlert=true will show this alert.     
    this.showAlert(true, "this is alert message", 'info', 'Info !');
  }
  // default values incase of no parameter is passed
  // passing isAlert=false will hide this alert. 
  showAlert(isAlert: boolean=false, alertMsg:string='', 
    alertTyp:string='danger', alertHeading:string='Error !'){
    // set 
    this.alertMsg = alertMsg;
    this.isAlert = isAlert;
    this.alertTyp = alertTyp;
    this.alertHeading = alertHeading;
  }
  ngOnInit(): void {
  }
}

in template.component.html

<div *ngIf="isAlert" class="alert alert-{{ alertTyp? alertTyp : '-' }} alert-block">
  <a class="close" data-dismiss="alert" (click)="showAlert(false)" >&#xD7;</a>
  <h4 class="alert-heading">{{ alertHeading? alertHeading : '-' }}</h4>
  {{ alertMsg? alertMsg : '-' }} 
  <!-- will first check is variable is not empty -->
  <!-- if empty then replace with hyphen -->
  <!-- a good approach to avoid crashes -->
</div>
<div class="">
  <button class="btn btn-primary" type="button" (click)="onSubmit()" >
    Save
  </button>
</div>