Original text: medium.com/@mirokoczka…

This tutorial is suitable for beginners. Here are the three most common communication methods. As shown in the following page, there is a component called side-bar. The component has a toggle method inside, which can control display or hide. This requires another component to call the toggle method.

  1. Pass a reference from one component to another
  2. Communicate with the parent component by sending an EventEmitter from the child component
  3. Communicate through Serive

Each example will have a StackBlitz online demo address

1. Pass a reference from one component to another

Demo1 template reference variable

A template reference variable is usually used to refer to a DOM element in a template. It can also refer to an Angular Component or directive or a Web Component. Use a hash sign (#) to declare reference variables. #phone means to declare a variable called phone to reference the element

This approach works well when components have dependencies. app component

<app-side-bar-toggle [sideBar]="sideBar"></app-side-bar-toggle>
<app-side-bar #sideBar></app-side-bar>
Copy the code

app.component.html

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']})export class SideBarToggleComponent {

  @Input() sideBar: SideBarComponent;

  @HostListener('click')
  click() { this.sideBar.toggle(); }}Copy the code

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']})export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  toggle() {
    this.isOpen = !this.isOpen;
  }
}
Copy the code

2. Communicate with parent component by sending EventEmitter from child component

The way Demo2 takes advantage of event propagation requires writing app.component.html in the child component

<app-side-bar-toggle (toggle)="toggleSideBar()"></app-side-bar-toggle>
<app-side-bar [isOpen]="sideBarIsOpened"></app-side-bar>
Copy the code

app.component.ts

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css']})export class AppComponent {
  sideBarIsOpened = false;

  toggleSideBar(shouldOpen: boolean) {
    this.sideBarIsOpened = !this.sideBarIsOpened;
  }
}
Copy the code

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']})export class SideBarToggleComponent {

  @Output() toggle: EventEmitter<null> = new EventEmitter();

  @HostListener('click')
  click() { this.toggle.emit(); }}Copy the code

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']})export class SideBarComponent {

  @HostBinding('class.is-open') @Input()
  isOpen = false;
}
Copy the code

3. Communicate through the service

Demo3 need new side – bar. Here the service, we wrote the service file, toggle method then ponent ponent service into side-bar-toggle.com and side-bar-toggle.com, The former calls the toggle method, sending the stream of events, and the latter subscribes to events

app.component.html

<app-side-bar-toggle></app-side-bar-toggle>
<app-side-bar></app-side-bar>
Copy the code

side-bar-toggle.component.ts

@Component({
  selector: 'app-side-bar-toggle',
  templateUrl: './side-bar-toggle.component.html',
  styleUrls: ['./side-bar-toggle.component.css']})export class SideBarToggleComponent {

  constructor(
    private sideBarService: SideBarService
  ) { }

  @HostListener('click')
  click() { this.sideBarService.toggle(); }}Copy the code

side-bar.component.ts

@Component({
  selector: 'app-side-bar',
  templateUrl: './side-bar.component.html',
  styleUrls: ['./side-bar.component.css']})export class SideBarComponent {

  @HostBinding('class.is-open')
  isOpen = false;

  constructor(
    private sideBarService: SideBarService
  ) { }

  ngOnInit() { this.sideBarService.change.subscribe(isOpen => { this.isOpen = isOpen; }); }}Copy the code

side-bar.service.ts

@Injectable()
export class SideBarService {

  isOpen = false;

  @Output() change: EventEmitter<boolean> = new EventEmitter();

  toggle() {
    this.isOpen = !this.isOpen;
    this.change.emit(this.isOpen);
  }
}
Copy the code