CODEWITHSUNDEEP
javascripthtmlangulartypescript
felixo
felixo

Reputation: 1613

Share Component Data with Other Components

I have followed this tutorial which has been super helpful but it seems I am still get getting it and I do not understand what I am missing!

As the mouse moves over a list in my child component (burger-component) I want the text to appear dynamically on the parent component (header-component).

As I one hovers, it gets the text, it emits the text but I can't get it to parent container!

Below is my code:

-ts from Burger component

  ngOnInit() {
  	this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = !this.active;
    this.opened.emit();
  }

  getText(event) {
    this.title = event.target.innerText;
    this.sendTitle.emit(this.title)
    console.log("title sent", this.title);
  }

-ts header-component 

  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved");
  	this.pageTitle = $event;
  }

<app-header-component (sendTitle)="getTitle($event)"></app-header-component>

Upvotes: 0

Views: 51

Answers (1)

Kat
Kat

Reputation: 1564

You can definitely accomplish this with some of the methods shown in this brief YouTube video: https://youtu.be/I317BhehZKM

You should also really consider using string interpolation here:

burger html

<li><a routerLink="/about" (mouseover)="getText(about)">{{about}}</a></li>
<li><a routerLink="/what-to-expect"(mouseover)="getText(whatToExpect)">{{whatToExpect}}</a></li>
<li><a routerLink="/gallery"(mouseover)="getText(gallery)">{{gallery}}</a></li>
<li><a routerLink="/activities"(mouseover)="getText(activities)">{{activities}}</a></li>
<li><a routerLink="/contact"(mouseover)="getText(contact)">{{contact}}</a></li>

burger ts

//Add Output and Event Emitter to your imports
import { Component, OnInit, Output, EventEmitter  } from '@angular/core';

export class BurgerComponent implements OnInit {
  //Add these variables for your string interpolation and also make sure you have the output decorator and variable
  about: string = "About";
  whatToExpect: string = "What to Expect";
  gallery: string = "Gallery";
  activities: string = "Activities";
  contact: string = "Contact";
  @Output() burgerText = new EventEmitter<string>()


  ngOnInit() {
    this.active = this.init || false;
  } 

  onBurgerClicked() {
    this.active = !this.active;
    //this.opened.emit();
  }

  getText(text: string) {
    this.burgerText.emit(text);
    console.log("title sent", text);
  }

}

header html

<h5>{{pageTitle}}</h5>
<app-burger (burgerText)="getTitle($event)"></app-burger>

header ts

  pageTitle: string;

  constructor() { }

  ngOnInit() {
  }

  getTitle($event) {
    console.log("title recieved: ", $event);
    this.pageTitle = $event;
  }

Upvotes: 2

Related Questions