angular2-chapter07

Components Communicating (Parent and Child, Same as chapter02)

Check code at: https://github.com/wghglory/angular2-fundamental

Pass parent component to child component (@Input())

Now in event-detail page, we don't show the session information. We want to show session-list for a specific event-detail. Let's create session-list at bottom of event-details.component page

Add below html into event-detail.component.html (parent component template):

Create events/event-detail/session-list.component.ts and its template html page. Don't forget to register component. Child component imports Input.

import { Component, Input } from '@angular/core'
import { ISession } from '../shared/index'

@Component({
    selector: 'session-list',
    templateUrl: 'app/events/events-detail/session-list.component.html'
})
export class SessionListComponent {
    @Input() sessions: ISession[]
}

Pass child component to parent (@Output(), EventEmitter)

We want to add session or cancel addNewSession for a detail event, so still in event-detail template (Parent component), add this:

    

        
Sessions
    
    

        Add Session
    

event-detail.component.ts (Parent component)

//http://localhost:8808/events/3

import {Component, OnInit} from '@angular/core'
import {EventService} from '../shared/event.service'
import {ActivatedRoute} from '@angular/router'

+ import {IEvent, ISession} from '../shared/index'


@Component({
    templateUrl: '/app/events/event-detail/event-detail.component.html',
    styles: [`
        .container{padding:0 20px;}
        .event-img{height:100px;}
+        a {cursor:pointer;}
    `]
})
export class EventDetailComponent implements OnInit {
    constructor(private eventService: EventService, private route: ActivatedRoute) { }

    event: IEvent
+    addMode: boolean = false

    ngOnInit() {
        //+ convert string to number
        this.event = this.eventService.getEvent(+this.route.snapshot.params['id'])
    }

+    addSession() {
+        this.addMode = true;
+    }

+    saveNewSession(session: ISession) {
+        //find max id, and newSession id should = id + 1
+        // const maxId = Math.max.apply(null, this.event.sessions.map(s => s.id))
+        const maxId = Math.max(...this.event.sessions.map(s => s.id))

+        session.id = maxId + 1;
+        this.event.sessions.push(session)
+        this.eventService.updateEvent(this.event)
+        this.addMode = false
+    }

+    cancelAddSession() {
+        this.addMode = false
+    }
}

shared/event.service.ts add updateEvent method:

updateEvent(event) {
    let index = EVENTS.findIndex(x => x.id == event.id)
    EVENTS[index] = event
}

When we creates a new session, save or cancel it in create-session.component, the data will be passed to its parent, event-detail.component.

create-session.component.ts (Child component):

+ import { Component, OnInit, Output, EventEmitter } from '@angular/core'
import { FormControl, FormGroup, Validators } from '@angular/forms'
import { ISession, restrictedWords } from '../shared/index'

@Component({
+    selector: 'create-session',
    templateUrl: 'app/events/event-detail/create-session.component.html',
    styles: [
        `
        em {float:right;color:#e05c65;padding-left:10px;}
        .error input, .error select, .error textarea {background-color:#e3c3c5;}
        .error ::-webkit-input-placeholder {color:#999;}
        .error ::-moz-placeholder {color:#999;}
        .error :-ms-input-placeholder {color:#999;}
        `
    ]
})
export class CreateSessionComponent implements OnInit {
+    @Output() saveNewSession = new EventEmitter()
+    @Output() cancelAddSession = new EventEmitter()

    newSessionForm: FormGroup
    name: FormControl
    presenter: FormControl
    duration: FormControl
    level: FormControl
    abstract: FormControl

    ngOnInit() {
        this.name = new FormControl('', Validators.required)
        this.presenter = new FormControl('', Validators.required)
        this.duration = new FormControl('', Validators.required)
        this.level = new FormControl('', Validators.required)
        this.abstract = new FormControl('', [Validators.required, Validators.maxLength(400), restrictedWords(['foo', 'bar'])])

        this.newSessionForm = new FormGroup({
            name: this.name,
            presenter: this.presenter,
            duration: this.duration,
            level: this.level,
            abstract: this.abstract
        })
    }

+    saveSession(formValues) {
        let session: ISession = {
            id: undefined,
            name: formValues.name,
            duration: +formValues.duration,  //convert
            presenter: formValues.presenter,
            level: formValues.level,
            abstract: formValues.abstract,
            voters: []
        }

+        this.saveNewSession.emit(session)
    }

+    cancel(){
+        this.cancelAddSession.emit()
+    }
}

wire up cancel button in create-session.component.html

    
Create Session


    

        

            Session Name:
            Required
            
        
        

            Presenter:
            Required
            
        
        

            Duration:
            Required
            
                select duration...
                Half Hour
                1 Hour
                Half Day
                Full Day
            
        
        

            Level:
            Required
            
                select level...
                Beginner
                Intermediate
                Advanced
            
        
        

            Abstract:
            Required
            Cannot exceed 400 characters
            Restricted Words found: {{abstract.errors.restrictedWords}}
            
        
        Save
+        Cancel