POV
POV

Reputation: 12015

How to change views clicking by button?

I have registration form with 3 steps. The view of form should be changed on the another view clicking by button Next.

How to realize that in Angular 2? I tried to use routing, but it replace me whole page.

Upvotes: 1

Views: 1961

Answers (2)

Pablo Lozano
Pablo Lozano

Reputation: 10342

I am creating that functionality right now for my application and the solution I've chosen is using tabs. Here you have a basic example (please note that the tab component was created by me, but you could use the ones from prime-ng). The point is that the next button just makes visible the next tab, hiding the current one. If you are using model driven forms you can easily navigate back and forward keeping the form field values:

<tabs>
    <tab title="Patient Information">
        <patient-data (onValid)="setPatientValid($event)"></patient-data>
    </tab>
    <tab title="Tab 2" [activable]="isPatientInformationValid()"></tab>
</tabs>

Here you have my tabs implementation (actually it is very simple):

Tabs component (the tabs container):

import { Component, Input, ContentChildren, QueryList, AfterContentInit } from '@angular/core';
import { TabComponent } from './tab.component';

@Component({
    selector: 'tabs',
    template: `
<div class="tabs-container">
    <ul class="nav nav-tabs">
        <li *ngFor="let tab of tabs" [class.active]="tab.active" [class.disabled]="!tab.activable" (click)="selectTab(tab)"><a>{{tab.title}}</a></li>
    </ul>
    <ng-content> </ng-content>
</div>`
})
export class TabsComponent implements AfterContentInit {

    @ContentChildren(TabComponent) tabs: QueryList<TabComponent>

    constructor() { }

    selectTab(tab: TabComponent) {
        if (tab.activable) {
            this.tabs.forEach(tab => tab.active = false);
            tab.active = true;
        }
    }

    ngAfterContentInit() {
        let activeTabs = this.tabs.filter((tab) => tab.active);
        // if there is no active tab set, activate the first
        if (activeTabs.length === 0) {
            this.selectTab(this.tabs.first);
        } else if (activeTabs.length > 1) {
            this.selectTab(activeTabs[0]);
        }
    }

}

And the Tab component:

import { Component, OnInit, Input } from '@angular/core';
import { TabsComponent } from './tabs.component';
@Component({
    selector: 'tab',
    template: `
<div *ngIf="active">
    <ng-content></ng-content>
</div>`
})
export class TabComponent implements OnInit {

    @Input() title: string;
    active: boolean=true;
    @Input() activable: boolean=true;

    constructor() {
    }

    ngOnInit() {
    }

}

Upvotes: 1

Matt Durkin
Matt Durkin

Reputation: 267

You could use conditional classes to hide/show form sections depending on a variable in your component.

HTML:

<div [class.hidden]="selectedSection != 1">
    Form content 1
</div>

<div [class.hidden]="selectedSection != 2">
    Form content 2
</div>     

CSS:

.hidden { display: none; }

and in your component:

selectedSection: number = 1;

then just change that variable when you want to change form section.

You could then add animations to these sections if you wanted. Depends how you want it to appear visually really.

Upvotes: 1

Related Questions