CODEWITHSUNDEEP
angularangular2-forms
hY8vVpf3tyR57Xib
hY8vVpf3tyR57Xib

Reputation: 3905

Constructing child Component in Angular 2

I am trying to build an application in Angular 2 (RC1) that has a basic form that enables the user to change some values. It consists of 2 components, UserListComponent and UserDetailComponent.

The application shows a list (that functionality is implemented in UserListComponent) where all users are clickable, if a user is selected the UserDetailComponent is shown (because of my *ngIf="selected_user" tag in the template).

The problem however is the following: the UserDetailForm is built during construction of my UserDetailComponent, however, initially a user isn't selected and therefor my code breaks. This is my UserDetailComponent.

import { Component, Input } from '@angular/core';
import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common';

import { User } from '../classes/user';

@Component({
    selector: 'user-detail',
    directives: [FORM_DIRECTIVES],
    templateUrl: 'partials/user-detail.html',
})

export class UserDetailComponent {
    userDetailForm: ControlGroup
    @Input()
    user: User;

    constructor(form: FormBuilder) {
        this.userDetailForm = form.group({
            'first_name': [this.user.first_name],
            'last_name': [this.user.last_name],
            'email': [this.user.email]
        });
    }

Is there a possibility to only construct this component if the a selected User is assigned, but also keeping it a child component of UserDetailList?

Edit: as requested my (simplified) parent component:

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

import { User } from '../classes/user';
import { UserService } from '../services/user.service';
import { UserDetailComponent } from './user-detail.component';

@Component({
    templateUrl: 'partials/user-list.html',
    directives: [ UserDetailComponent ]
})

export class UserListComponent {
    selectedUser: User;
    users: User[];
    number_of_pages: number;
    currentPage: number;
    number_of_users: number;

    constructor(private _userService: UserService) {
        this.currentPage = 1;
        this.number_of_pages = 0;
        this.number_of_users = 0;
    }

    getUsers() {
        this._plugifyService.getUsers().subscribe(data => {
            this.users = data.users,
            this.number_of_pages = data.number_of_pages,
            this.number_of_users = data.number_of_users
        });
    }

    onSelect(user: User) {
        this.selectedUser = user;
    }

    ngOnInit() {
        this.getUsers();
    }
}

Upvotes: 0

Views: 127

Answers (2)

Günter Zöchbauer
Günter Zöchbauer

Reputation: 657078

If you move the code to ngOnChanges() it will (re)create the form when the value is set:

constructor(private form: FormBuilder) {}

ngOnChanges() {
    this.userDetailForm = form.group({
        'first_name': [this.user.first_name],
        'last_name': [this.user.last_name],
        'email': [this.user.email]
    });
}

Upvotes: 0

Thierry Templier
Thierry Templier

Reputation: 202138

You could define your form in the ngOnInit hook method:

constructor(form: FormBuilder) {
}

ngOnInit() {
    this.userDetailForm = form.group({
        'first_name': [this.user.first_name],
        'last_name': [this.user.last_name],
        'email': [this.user.email]
    });
}

Input properties are only available after the first call of the ngOnChanges method right before the call of the ngOnInit one.

You can then use this way:

<user-detail *ngIf="selected_user" [user]="selected_user"></user-detail>

Upvotes: 1

Related Questions