title: show the first element in the dom and hide other all using css in angular
body: <p>I am working on the angular forms where i have to display the validation errors. To do this i have implemented the array of error to display in the view. but the issue with my dom structure is if i get multiple validation issue for the form element then all errors are getting displayed. But what i am expecting is to display one error message after resolving the first error i have to display it other.
  How to show the first error using css or any other way to implement it in angular.
  <strong><em></em> element will not get build if it doesn't have error.</strong></p>
  
  <pre><code>&lt;div&gt;
  &lt;error&gt;&lt;/error&gt;
  &lt;/div&gt;
  &lt;div&gt;
  //error element will not build if it does't have error
  &lt;/div&gt;
  &lt;div&gt;
  &lt;error&gt;&lt;/error&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/DRkLr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DRkLr.png" alt="DOM structure"></a></p>