<p>
Popovers can contain any arbitrary HTML, Angular
bindings and even directives!
Simply enclose desired content or title in a
<code><ng-template></code> element.
</p>
<ng-template #popContent>Hello, <b>{{name}}</b>!</ng-template>
<ng-template #popTitle>Fancy <b>content!!</b></ng-template>
<button type="button" class="btn btn-outline-secondary"
[ngbPopover]="popContent" [popoverTitle]="popTitle">
I've got markup and bindings in my popover!
</button>
buttons
<p *ngFor="let alert of alerts">
<ngb-alert [type]="alert.type" (closed)="close(alert)">
{{ alert.message }}</ngb-alert>
</p>
<p>
<button type="button" class="btn btn-primary" (click)="reset()">Reset</button>
</p>interface Alert {
type: string;
message: string;
}
const ALERTS: Alert[] = [{
type: 'success',
message: 'This is an success alert',
}, {
type: 'info',
message: 'This is an info alert',
}, {
type: 'warning',
message: 'This is a warning alert',
}, {
type: 'danger',
message: 'This is a danger alert',
}, {
type: 'primary',
message: 'This is a primary alert',
}, {
type: 'secondary',
message: 'This is a secondary alert',
}, {
type: 'light',
message: 'This is a light alert',
}, {
type: 'dark',
message: 'This is a dark alert',
}
];
@Component({
selector: 'app-heroes',
templateUrl: './heroes.component.html',
styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit{
name = 'World';
alerts: Alert[];
constructor() {
this.reset();
}
ngOnInit(): void {
throw new Error('Method not implemented.');
}
close(alert: Alert) {
this.alerts.splice(this.alerts.indexOf(alert), 1);
}
reset() {
this.alerts = Array.from(ALERTS);
}
}
ngbootstrp
No comments:
Post a Comment