You can use your custom CSS to customize your alert message or you can use Bootstrap Alert as below -
<div class="alert alert-success" role="alert"> A simple success alert—check it out! </div>
Now you know how to create Alert, now let's talk about how you can include bootstrap in your angular project so that bootstrap classes will work, there are two many ways to do this but I will simply use CDN style path in
<link href="https://firstname.lastname@example.org/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
Above code you need to paste in your index.html file inside
Now let's talk about how this alert will be conditional -
<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>
Now you might get below error-
Property 'names' does not exist on type 'AppComponent'.
This is because you are using
names in html which is not available in ts file, so you need to add this as -
names = ['Rajesh', 'John', 'Smith'];
Full Code and Demo -
With all that being said, I highly recommend you keep learning!