Angular : Show Alert Message on a condition

Rajesh Kumar Yadav - May 17 '21 -

- Dev Community

How to create Alert?

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 index.html



<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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 <head> tag.

How to convert alert to conditional alert?

Now let's talk about how this alert will be conditional -

app.component.html



<p class="alert alert-success" *ngIf="names.length > 2">Currently there are more than 2 names!</p>

Now you might get below error-

Error in src/app/app.component.html (5:39)
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 -

app.component.ts



  names = ['Rajesh', 'John', 'Smith'];

Now you will see -

Full Code and Demo -

With all that being said, I highly recommend you keep learning!

Thank you for reading this article. Please feel free to connect with me on LinkedIn and Twitter.