title: Angular material create alert similar to bootstrap alerts
body: <p>I am new to angular material. i am trying to implement alert to display messages using angular material which is similar in bootstrap alert ie. </p>
  
  <pre><code>&lt;div class="alert alert-success" role="alert"&gt;
    &lt;strong&gt;Well done!&lt;/strong&gt; You successfully read this important alert message.
  &lt;/div&gt;
  &lt;div class="alert alert-info" role="alert"&gt;
    &lt;strong&gt;Heads up!&lt;/strong&gt; This alert needs your attention, but it's not super important.
  &lt;/div&gt;
  &lt;div class="alert alert-warning" role="alert"&gt;
    &lt;strong&gt;Warning!&lt;/strong&gt; Better check yourself, you're not looking too good.
  &lt;/div&gt;
  &lt;div class="alert alert-danger" role="alert"&gt;
    &lt;strong&gt;Oh snap!&lt;/strong&gt; Change a few things up and try submitting again.
  &lt;/div&gt;
  </code></pre>
  
  <p>Can anyone help me what is the best way to implement in angular material?</p>
  
  <p>Many Thanks</p>