jessipearcy

<app-toolbar></app-toolbar>


<app-habit-form *ngIf="formOpen; else allHabits" 
  (onExit)="closeForm()"
  [habit]="editHabit"></app-habit-form>

<ng-template #allHabits>
  <app-all-habits 
    (addEvent)="onAdding()"

jessipearcy

export class HabitFormComponent implements OnInit {
  @Output() onExit = new EventEmitter();
  @Input() habit: Habit;

  public editingIndex: number;
  public habits: Habit[];
  public habitForm = new FormGroup({
    name: new FormControl(''),
    frequency: new FormControl(''),
    description: new FormControl(''),

jessipearcy

import { Component, OnInit } from '@angular/core';
import { Habit } from './models/habit';

// ...Code Omitted...
export class AppComponent implements OnInit {
  public formOpen = false;
  public editHabit: Habit;

// ...Code Omitted...

jessipearcy

<!--...Code Omitted...-->  
<div *ngFor="let habit of habits; let i = index">
    <mat-card>
      <mat-card-title>
        <mat-icon
          class="habit-icon"
          color="accent"
          aria-hidden="false"
          aria-label="circle check mark icon"
          >check_circle_outline</mat-icon

jessipearcy

export class AllHabitsComponent implements OnInit {
  @Output() addEvent = new EventEmitter();
  @Output() editEvent = new EventEmitter<Habit>();

  public habits: Habit[];

  constructor() {}

  ngOnInit(): void {
    this.habits = HABITS;

jessipearcy

export class AppComponent implements OnInit {
  public formOpen = false;

  ngOnInit(): void {}

  onAdding() {
    this.formOpen = true;
  }

  closeForm() {

jessipearcy

export class HabitFormComponent implements OnInit {
  @Output() onExit = new EventEmitter();

// ...Code Omitted for Brevity...

  exitForm() {
    this.habitForm.reset();
    this.onExit.emit();
  }
}

jessipearcy

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public formOpen = false;

jessipearcy

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  public formOpen = false;

jessipearcy

<div class="all-habits">
	<h1>All Habits</h1>
	<button mat-raised-button color="accent" (click)="onAdd()">
      Add New Habit
  </button>
  <div *ngFor="let habit of habits; let i = index">
    <mat-card>
      <mat-card-title>
        <mat-icon
          class="habit-icon"