Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import { Component, OnInit } from "@angular/core";
- import { Store } from "@ngrx/store";
- import { selectHero, State } from "../../reducers";
- import { Hero } from "../../models/hero.model";
- import * as heroActions from "../../actions/hero.actions";
- import { FormBuilder, FormGroup, Validators } from "@angular/forms";
- @Component({
- selector: "app-heroes",
- templateUrl: "./heroes.component.html",
- styleUrls: ["./heroes.component.css"]
- })
- /*
- * This is a container component
- * contains different presentational components
- */
- export class HeroesComponent implements OnInit {
- editItemUrl: string = "/heroes/edit-hero/";
- list$: any;
- list: Hero[];
- newItemForm: FormGroup;
- isShowNewItemForm: boolean = false;
- constructor(private store: Store<State>, private fb: FormBuilder) {}
- ngOnInit() {
- this.formBuilderInit();
- this.store.dispatch(new heroActions.LoadHeroes()); // dispatching a LoadHeroes action
- this.list$ = this.store.select(selectHero); // picking up the selectHero selector which returns state.heroes
- }
- onSubmit() {
- this.store.dispatch(new heroActions.CreateHero(this.newItemForm.value)); // dispatching a CreateHero action
- this.newItemForm.reset();
- this.isShowNewItemForm = !this.isShowNewItemForm;
- }
- showNewItemForm() {
- this.isShowNewItemForm = !this.isShowNewItemForm;
- }
- cancelForm() {
- this.isShowNewItemForm = !this.isShowNewItemForm;
- }
- removeItem(hero: Hero) {
- const isConfirmed = confirm(`Delete ${hero.firstName}`);
- if (!isConfirmed) return;
- this.store.dispatch(new heroActions.DeleteHero(hero)); // dispatching a DeleteHero action
- }
- private formBuilderInit(): void {
- this.newItemForm = this.fb.group({
- firstName: ["", Validators.required],
- lastName: [""],
- house: [""],
- knownAs: [""]
- });
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement