title: Angular how to use the app component functions automatically in the other self made components?
body: <p>I am working with multilingual project with angular and the logic for changing the language and the stylesheets is typed in the app default component, I created navbar component but I can't use the changeLanguage function because it's in the app component so I must duplicate the function and the logic in every component I make, how to solve this or how to make the functions in the app component useable in the other components?</p>
  <p>the app components code</p>
  <pre><code>import { Component } from '@angular/core';
  import { TranslateService } from &quot;@ngx-translate/core&quot;;
  import { Inject } from '@angular/core';
  import { DOCUMENT } from '@angular/common';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'labsystem';
  
    constructor(private translateService: TranslateService, @Inject(DOCUMENT) private document: 
  Document) { }
  
    changeLanguage(lang: string) {
      let htmlTag = this.document.getElementsByTagName('html')[0] as HTMLHtmlElement;
  
      htmlTag.dir = lang === &quot;ar&quot; ? &quot;rtl&quot; : &quot;ltr&quot;;
      this.translateService.setDefaultLang(lang);
      this.translateService.use(lang);
      this.changeCssFile(lang);
    }
  
    changeCssFile(lang: string) {
      let headTag = this.document.getElementsByTagName(&quot;head&quot;)[0] as HTMLHeadElement;
  
      let existingLink = this.document.getElementById(&quot;langCss&quot;) as HTMLLinkElement;
  
      let bundleName = lang === &quot;ar&quot; ? &quot;arabicStyle.scss&quot; : &quot;englishStyle.scss&quot;;
  
      if (existingLink) {
        existingLink.href = bundleName;
      } else {
        let newLink = this.document.createElement('link');
        newLink.rel = &quot;stylesheet&quot;;
        newLink.id = &quot;langCss&quot;;
        newLink.href = bundleName;
        headTag.appendChild(newLink);
      }
    }
  }
  </code></pre>
  <p>I need to use these functions in the other components</p>