How to call component from another component

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!

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.