title: How to display credit cards logo based on their first or two first numbers
body: <p>I am a beginner to Angular and trying to display the logo of five credit cards based on their first digit or the two first digit using attribute directive. The code is below, it works for Visa and mastercard, and for the first two digit if there is not '4' or '5' digits in them, if there is it changes to visa or mastercrd. For example number '34' instead of displaying Amex logo displays visa or '65' for discover shows mastercard. In addition, it works just for the first string, '38' for diners shows nothing.</p>
  <p>I appreciate any help!</p>
  <pre><code>import { Directive, Input, OnChanges, HostBinding } from '@angular/core';
  @Directive({
      selector: '[appCCImage]'
  })
  export class CCImageDirective implements OnChanges {
  
      constructor() { }
      @Input() cardNumber: string;
      @HostBinding('src') imageSource;
      ngOnChanges() {
          this.imageSource = './assets/default.png';
          if(this.cardNumber){
              if (this.cardNumber.indexOf('30' || '36' || '38' || '39') &gt;-1) 
                  this.imageSource = './assets/diners.png';
              if (this.cardNumber.indexOf('5') &gt;-1)  
                  this.imageSource = './assets/mastercard.png';
              if (this.cardNumber.indexOf('34' || '37') &gt;-1)
                  this.imageSource = './assets/amex.png';
              if (this.cardNumber.indexOf('60' || '64' || '65') &gt;-1)
                  this.imageSource = './assets/discover.png';
              if (this.cardNumber.indexOf('4') &gt;-1)
                  this.imageSource = &quot;./assets/visa.png&quot;
          }
      }
  
  }
  </code></pre>