title: What causes this failure to change the value of a service variable from a component, in Angular 9?
body: <p>I am working on a <strong>Users</strong> app with Angular 9 and Angular Material. The list component should display, for each user, the username and avatar, in a table row.</p>
  <p>For this purpose, I have a list component and a list service.</p>
  <p>The service is simple:</p>
  <pre><code>export class UsersListService {
  
    searchQuery = '';
  
    usersUrl = `https://api.github.com/search/users?q=${this.searchQuery}`;
  
    constructor(private http:HttpClient) { }
  
    getUsers():Observable&lt;User[]&gt; {
      if (this.searchQuery.length &gt;= 3){
        return this.http.get&lt;User[]&gt;(`${this.usersUrl}`)
        .pipe(map(response =&gt; response['items']));
      }
    }
  
  }
  </code></pre>
  <p>In the list component I have:</p>
  <pre><code>&lt;form [formGroup]=&quot;searchUser&quot;&gt;
    &lt;mat-form-field appearance=&quot;standard&quot;&gt;
      &lt;mat-label&gt;Search&lt;/mat-label&gt;
      &lt;input matInput formControlName=&quot;search&quot; placeholder=&quot;Search&quot; [(ngModel)]=&quot;searchQuery&quot; (keyup)=&quot;applySearch()&quot;&gt;
    &lt;/mat-form-field&gt;
    &lt;button mat-button matSuffix mat-icon-button aria-label=&quot;Clear&quot; *ngIf=&quot;searchQuery&quot; (click)=&quot;clearSearch()&quot;&gt;
    &lt;mat-icon&gt;close&lt;/mat-icon&gt;
    &lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  <p>and</p>
  <pre><code>export class ListComponent implements OnInit {
  
    pageTitle = 'Users';
  
    usersList:User[];
  
    constructor(private UsersListService:UsersListService, private fb: FormBuilder) { }
  
    usersTableData: MatTableDataSource&lt;any&gt;;
  
    displayedColumns: string[] = ['photo', 'login', 'actions'];
  
    searchUser = this.fb.group({});
  
    searchQuery = &quot;&quot;
  
    @ViewChild(MatPaginator) paginator: MatPaginator;
  
    ngOnInit(): void  {
      // User list
      if (this.UsersListService.searchQuery.length &gt;= 3){
        this.UsersListService.getUsers().subscribe(
          usersList =&gt; { 
            this.usersList = usersList;
            this.usersTableData = new MatTableDataSource(usersList);
            this.usersTableData.paginator = this.paginator;
          },
          error =&gt; { }
        );
      } 
      
  
      //Add the search box
      this.searchUser.addControl('search', this.fb.control(''));
    }
    
    clearSearch() {
      this.searchQuery = &quot;&quot;;
      this.applySearch();
    }
  
    applySearch() {
      this.UsersListService.searchQuery = this.searchQuery;
    }
  </code></pre>
  <p>As it can be observed above, I try to change the value of the variable <code>searchQuery</code> from the component. More exactly, in the <code>applySearch()</code> method.</p>
  <p>For a reason I have not figured out, this fails (even if there is no error in the terminal or browser).</p>
  <p>What is missing?</p>