I come from a Python background, but I started trying to learn Angular and I'm really having trouble. Working between components is confusing to me and I can't figure it out. I made a good example that I think if someone helped me with it would go along way towards understanding Angular.

I just have two components: a header component and an app component. In the header component, I ask for the user's name and they click a button, and then it should show Hello {{name}} in the next component. I cannot get it to work to say the least and it's really frustrating. The Header part seems to work okay, but it's just not communicating with the other component at all. Neither the button part or the name part are working so I am clearly misunderstanding something I need to do when it comes to listening from the parent component.

Here is my Header HTML:

Name: <input type=text id=userInput value=Joe>



<button (click)=showName()>Show More</button>

Here is my Header TS:

import { Component, OnInit, Output, EventEmitter } from '@angular/core';



@Component({

  selector: 'app-header',

  templateUrl: './header.component.html',

  styleUrls: ['./header.component.css']

})

export class HeaderComponent implements OnInit {

  bodyDiv = false;

  inputName = '';

  @Output() buttonClicked = new EventEmitter();



  constructor() { }



  ngOnInit() {

  }

  showName() {

    console.log('showName clicked.');

    this.bodyDiv = true;

    this.inputName = document.getElementById('userInput').value;

    console.log(this.inputName);

    console.log(this.bodyDiv);

    this.buttonClicked.emit(this.bodyDiv);

    this.buttonClicked.emit(this.inputName);

  }

}

Here is the main Component's HTML:

<app-header (buttonClicked)='showNextComponent($event)'></app-header>



<p *ngIf=![hiddenDiv] [inputName]=name>Hello {{ name }} </p>

Here is the main component's TS:

import { Component } from '@angular/core';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  hiddenComponent = true;

  title = 'show-button';



  showNextComponent() {

    console.log('Button clicked.');

    this.hiddenComponent = false;

    console.log(this.hiddenComponent);

  }

}

So who can show me what I'm doing wrong and help figure out Angular a little better? :) Thank you!