call child component method from parent component in angular

Question

when I click on the about ceo link on the dashboard component it should trigger load click function. about ceo component loading on dashboard component as in router-outlet

    // Dashboard component html (parent component)

    <div class="parent">
        <div class="left">
            <div class="menu">
               <a href="#" routerLink="aboutceo" (click)="Clickload()">About CEO</a>
            </div>   
        </div>
        <div class="right">
            <router-outlet></router-outlet>  
        </div>
    </div>

    // dashboard component ts (parent component)

    export class DashboardComponent implements OnInit {
    
      @ViewChild(AboutceoComponent, {static:true}) 
      private aboutceo: AboutceoComponent;
    
      constructor(private router:Router) {}
    
      Clickload(){
        this.aboutceo.loadClick();
      }
    }

    // aboutceo component ts (child component)

    export class AboutceoComponent implements OnInit {
    
      loadclick(){
        alert("welcome");
      }
    }

i tried using viewchild but its not working

You parent component template doesn't contain a reference to the child component. You have a routerLink, which is for routing, not referencing a child. — Brandon Taylor, Mar 08 '23 at 14:47
@BrandonTaylor in app.routing.ts file the aboutceo component path is in childrens of dashboard component. about ceo component is loading with in dashboard component router-outlet. — Ram Chander Mothkoori, Mar 08 '23 at 14:53
Routing is completely different than a component reference. ViewChild/Children requires that the component(s) are actually present in the parent component, not rendered as part of a router outlet. — Brandon Taylor, Mar 08 '23 at 15:08
I'm actually not sure. I haven't had to handle that use case before. You might have to first access the router outlet, then see if you can access its children. https://stackoverflow.com/questions/45587507/angular-how-to-get-component-instance-of-router-outlet — Brandon Taylor, Mar 08 '23 at 15:22
@BrandonTaylor it is working with (activate) attribute in router-outlet, thanks — Ram Chander Mothkoori, Mar 13 '23 at 11:50

call child component method from parent component in angular

0 Answers0