如何将重点放在另一个组件的输入上

Question

我有两个组件，导航栏和页脚，我需要在导航栏上运行某些内容时，将七个焦点集中在页脚中的一个输入上。

导航栏和页脚属于app.component

我的app.component

  <app-navbar></app-navbar>
  <router-outlet></router-outlet>
  <app-footer></app-footer>

navbar.component.html

<li (click)="SetFocus()">
     <a>Set focus on input</a>
</li>

navbar.component.ts

import { FooterComponent } from './../footer/footer.component';



@Component({
      selector: 'app-navbar',
      templateUrl: './navbar.component.html',
      styleUrls: ['./navbar.component.css']
    })
    export class NavbarComponent implements OnInit, OnDestroy {
        [...]
      SetFocus(){
         //do somenthing to set focus
         const footer: ElementRef =  FooterCompoenet; 
      }

    }

footer.component.html

                <div class="form-group">
                  <label for="cardOwner">Titular do cartão:</label>
                   <!-- Input that should receive focus and not scroll-->
                  <input type="text" id="cardOwner" class="form-control">
                </div>