title: ng-src and ngFor in Angular
body: <p>Lets say i take some photo in according to id of something and put it in an array like: </p>
  
  <pre class="lang-js prettyprint-override"><code>data.attributes.photos = [ "12.jpg", "12_1.jpg", "12_2.jpg" , 12_3.jpg, ... ]
  </code></pre>
  
  
  
  <p>and use it with ngFor like : </p>
  
  <pre class="lang-js prettyprint-override"><code>&lt;ngb-carousel&gt;
          &lt;ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photos"&gt;
              &lt;img class="card-img-top img-fluid w-full" [src]="photo" alt="Okul Fotoğrafı Bulunamadı"&gt;
          &lt;/ng-template&gt;
      &lt;/ngb-carousel&gt;
  </code></pre>
  
  
  
  <p>now there is something called <em>ng-src</em> and <em>on-error</em> in Angular which shows a sample image when there is no any image given in the array.</p>
  
  <p>like this : </p>
  
  <pre class="lang-js prettyprint-override"><code> &lt;ngb-carousel&gt;
                              &lt;ng-template ngbSlide *ngFor="let photo of navbar.infoData.attributes.photo"&gt;
                                  &lt;img class="card-img-top img-fluid w-full" ng-src={{photo}}}  err-SRC="http://google.com/favicon.ico" alt="Okul Fotoğrafı Bulunamadı"&gt;
                              &lt;/ng-template&gt;
                          &lt;/ngb-carousel&gt;
  </code></pre>
  
  
  
  <p>It may work but since i dont know the number of images. is it possible to not show the image if it does not exist in the url of my src?</p>