How to call component from another component

Question

component routing in angular

Gowtham Cp · Answer

Component Routing in Angular Set Up Routes : Define which components to show for different URLs in your app-routing.module.ts . const routes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent } ]; Configure Router : Import and set up the router in your main module ( app.module.ts ). @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) Add Router Outlet : Place in your main HTML ( app.component.html ). This is where the components will be displayed. Create Links : Use Home and About to navigate to different views.

Meet Shah · Answer

In Angular, components are typically not directly "called" from one another in the way functions are called. Instead, Angular promotes a declarative approach using templates and a hierarchical component structure with data binding and event handling. However, there are several ways to interact between components depending on their relationship: ### 1. **Parent-Child Communication** If you want a parent component to interact with a child component: - **Parent to Child**: Use property binding with `@Input()` decorator. - **Child to Parent**: Use event binding with `@Output()` decorator and `EventEmitter`. #### Example **Parent Component Template**: ```html ``` **Child Component**: ```typescript // child.component.ts import { Component, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-child', template: ` Send Data to Parent `, }) export class ChildComponent { @Input() childProperty: string; // Parent to Child @Output() childEvent = new EventEmitter (); // Child to Parent sendToParent() { this.childEvent.emit('Data from Child'); } } ``` **Parent Component Class**: ```typescript // parent.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html' }) export class ParentComponent { parentData = 'Data from Parent'; handleChildEvent(data: string) { console.log('Received from child:', data); } } ``` ### 2. **Sibling Components Communication** If two components are siblings (under the same parent), they can communicate through a shared service. #### Example 1. **Create a Shared Service**: ```typescript // shared.service.ts import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root' }) export class SharedService { private messageSource = new Subject (); currentMessage = this.messageSource.asObservable(); changeMessage(message: string) { this.messageSource.next(message); } } ``` 2. **Inject the Service in Both Components**: **First Sibling Component**: ```typescript // first-sibling.component.ts import { Component } from '@angular/core'; import { SharedService } from '../shared.service'; @Component({ selector: 'app-first-sibling', template: ` Send Message `, }) export class FirstSiblingComponent { constructor(private sharedService: SharedService) {} sendMessage() { this.sharedService.changeMessage('Hello from First Sibling'); } } ``` **Second Sibling Component**: ```typescript // second-sibling.component.ts import { Component, OnInit } from '@angular/core'; import { SharedService } from '../shared.service'; @Component({ selector: 'app-second-sibling', template: ` {{message}} `, }) export class SecondSiblingComponent implements OnInit { message: string; constructor(private sharedService: SharedService) {} ngOnInit() { this.sharedService.currentMessage.subscribe(message => this.message = message); } } ``` ### 3. **Using ViewChild for Direct Component Interaction** You can directly access a child component from a parent component using `@ViewChild`. #### Example **Parent Component Template**: ```html Call Child Method ``` **Parent Component Class**: ```typescript // parent.component.ts import { Component, ViewChild } from '@angular/core'; import { ChildComponent } from './child.component'; @Component({ selector: 'app-parent', templateUrl: './parent.component.html' }) export class ParentComponent { @ViewChild('childComponent') child: ChildComponent; callChildMethod() { this.child.childMethod(); } } ``` **Child Component Class**: ```typescript // child.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-child', template: ` Child Component ` }) export class ChildComponent { childMethod() { console.log('Child method called!'); } } ``` ### 4. **Using Services with Observables for Loose Coupling** For components that do not have a parent-child or sibling relationship, you can use a service with observables to facilitate communication. ### Conclusion Choose the communication method that best fits the component relationship and complexity of your application. If you need further customization or specific scenarios, feel free to ask!