Angular: Components, Two-way Data Binding

app.component.html

<app-navbar></app-navbar>

<app-animals></app-animals>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { NavbarComponent } from './components/navbar/navbar.component';
import { AnimalsComponent } from './components/animals/animals.component';
import {FormsModule} from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent,
    NavbarComponent,
    AnimalsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

animals.component.html

<h1>Das süßeste Tier ist ein {{ animal }}!</h1>

<input [(ngModel)]="animal">

animals.component.ts

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

@Component({
  selector: 'app-animals',
  templateUrl: './animals.component.html',
  styleUrls: ['./animals.component.scss']
})
export class AnimalsComponent implements OnInit {

  public animal = 'Hundewelpe';

  constructor() { }

  ngOnInit() {
  }

}

navbar.component.html

<div id="navbar">
  <ul>

    <li>
      <a href="https://www.boredpanda.com/cute-baby-animals/?utm_source=google&utm_medium=organic&utm_campaign=organic">
        Aww
      </a>
    </li>

    <li>
      <a
        href="https://www.boredpanda.com/cutest-baby-animals/?utm_source=google&utm_medium=organic&utm_campaign=organic">
        Favourites of all time
      </a>
    </li>

  </ul>
</div>

navbar.component.ts

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.scss']
})
export class NavbarComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}