title: How do you get ngx-translate work with angular material
body: <p>I'm a novice at Angular and have an angular app 13.3.6 with angular material 13.3.6 and ngx-translate 14.0.0. I use mat-option to select my languages, however when I click them, they don't change the website's language.</p>
  <p>My translationservice looks like this:</p>
  <pre><code>export class TranslatorService implements OnInit {
  
    constructor(public translate: TranslateService, private http: HttpClient) {
      translate.addLangs(['nl', 'fr', 'en']);
      translate.setDefaultLang('nl');
      const browserLang: any = translate.getBrowserLang();
      translate.use(browserLang.match(/nl|fr|en/) ? browserLang : 'nl');
    }
  
    // eslint-disable-next-line @angular-eslint/contextual-lifecycle
    ngOnInit(): void {
      this.translate.addLangs(['nl', 'fr', 'en']);
      this.translate.setDefaultLang('nl');
  
      const browserLang: any = this.translate.getBrowserLang();
      this.translate.use(browserLang.match(/nl|fr|en/) ? browserLang : 'nl');
    }
  }
  </code></pre>
  <p>and my implementation in the component like this:</p>
  <pre><code>&lt;mat-select class=&quot;lang-selector__dropdown&quot; [(ngModel)]=&quot;translate.use&quot;&gt;
    &lt;mat-option *ngFor=&quot;let lang of translate.getLangs()&quot; [value]=&quot;translate.use&quot;&gt;{{ lang | uppercase }}&lt;/mat-option&gt;
  &lt;/mat-select&gt;
  </code></pre>