jbuddy
Reputation: 13
I'm using Angular and I want to use *ngIf else (available since version 4) in this example
i want to create a scenario with 8 form on a single page; each form in a different section with a continue button. on the click of btn1 let section 1 be hidden and section 2 be visible and on the click btn 2 let section 2 and section 1 be hidden and section 3 be displayed and so on till the last form that carries the proceed and previous button `
import { Component, OnInit } from '@angular/core';
import { NgForm } from '@angular/forms'
@Component( {
selector: 'app-job-score-target',
templateUrl: './job-score-target.component.html',
styleUrls: [ './job-score-target.component.css' ]
} )
export class JobScoreTargetComponent implements OnInit
{
siteUrl = 'http://stg-bpm.uacnplc.com/atb-appraisal'
show: boolean = false;
myForm: NgForm;
section1: boolean = true;
section2: boolean = false;
section3: boolean = false;
section4: boolean = false;
section5: boolean = false;
section6: boolean = false;
section7: boolean = false;
section8: boolean = false;
constructor () { }
ngOnInit ()
{
}
onContinue ( section: string )
{
console.log( section );
// this.reset();
console.log( section );
if ( section == 'section1' ) { this.section2 = true; }
else if ( section == 'section2' ) { this.section3 = true; }
else if ( section == 'section3' ) { this.section4 = true; }
else if ( section == 'section4' ) { this.section5 = true; }
else if ( section == 'section5' ) { this.section6 = true; }
else if ( section == 'section6' ) { this.section7 = true; }
else if ( section == 'section7' ) { this.section8 = true; }
// this.show;
// console.log( this.show, 'show' )
}
reset ()
{
this.section1 = false;
this.section2 = false;
this.section3 = false;
this.section4 = false;
this.section5 = false;
this.section6 = false;
this.section7 = false;
this.section8 = false;
}
}h{
text-align: center;
}
button{
display: inline-block;
border-radius: 1px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 15px;
padding: 5px;
width: 100px;
transition: all 0.5s;
cursor: pointer;
margin: 2px;
}
<h6>Employee Target Scoring</h6>
<div class="container">
<div class="row">
<form #f="ngForm">
<div id="1"class="col-xs-12" *ngIf="section1">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Attitude & Professional Appearance </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Exude a Positive Image </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Helpful, open and acommodating </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Giving Attention to details </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Ability to Multitask, Followup and Follow through </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Punctuality and attendance</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text" style=" text-align: center"></td>
</tr>
<tr>
<td>Discipline and Morals </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Relationship with Superior,peer, surbodinate </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn1" class="btn-block" type="button" (click)="onContinue('section2')" style="float:right">Continue</button>
</div>
<div id="2" class="col-xs-12" *ngIf="section2==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Customer Service and Relationship Mgt. </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Excellent communication and interpersonal skill</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Treat all Clients (internal & External) with respect </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Timely Response to Clients (internal & External) needs </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Building rapport and trust with clients </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Creating in-road and good will for ATB with clients</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn2" class="btn-block" type="button" (click)="onContinue('section3')" style="float:right">Continue</button>
</div>
<div id="3" class="col-xs-12" *ngIf="section3==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Operations </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Contribute to the effective daily operation</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Maintaining work equipments</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Ensure smooth running of the business</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn3" class="btn-block" type="button" (click)="onContinue('section4')" style="float:right">Continue</button>
</div>
<div id="4" class="col-xs-12" *ngIf="section4==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Business Documentations </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Keep accurate and complete records </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Saves time by making records available for others</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Ensure daily backup </td>
<td>4</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Ensure source are saved as agreed in the team</td>
<td>4</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn4" class="btn-block" type="button" (click)="onContinue('section5')" style="float:right">Continue</button>
</div>
<div id="5" class="col-xs-12" *ngIf="section5==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Team work & Communication </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Ability to work positively with all teams </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Work in unity to achieve team's goals</td>
<td>3</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Going extra mile to achieve the Team's goal</td>
<td>3</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Communication: Oral & written</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn5" class="btn-block" type="button" (click)="onContinue('section6')" style="float:right">Continue</button>
</div>
<div id="6" class="col-xs-12" *ngIf="section6==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Confidentiality </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Maintain confidentiality on ATB issues</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Maintain confidentiality on Clients issues</td>
<td>3</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Maintain confidentiality on colleague issues </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Keeep content of confidential documents</td>
<td>3</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn6" class="btn-block" type="button" (click)="onContinue('section7')" style="float:right">Continue</button>
</div>
<div id="7" class="col-xs-12" *ngIf="section7==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Personal & Professional Development </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Full attendance at scheduled trainings </td>
<td>3</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Prepare for and write specified professional certifications</td>
<td>4</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Personal developments through books, short courses,& personal software projects</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Affilliation to relevant professional body</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn7" class="btn-block" type="button" (click)="onContinue('section8')" style="float:right">Continue</button>
</div>
<div id="8" class="col-xs-12" *ngIf="section8==true">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Understanding job role and expectation</th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Delivers duties as expected</td>
<td>4</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>interest, initiative, involvement & commitment to duties </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Performs job in the most cost effective manner </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Contributes to the financial growth of the company</td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button class="success" type="button" style="float:right" routerLink="/achievement">Submit</button>
<button class="success" type="button" style="float:right" routerLink="/job-description">Previous</button>
</div>
</form>
</div>
</div>`
Upvotes: 0
Views: 124
Answers (1)
Baptiste Arnaud
Reputation: 2760
It would be cleaner if you implement a variable currentStep which is a number
export class JobScoreTargetComponent implements OnInit
{
siteUrl = 'http://stg-bpm.uacnplc.com/atb-appraisal'
show: boolean = false;
myForm: NgForm;
currentStep: number;
constructor () { }
ngOnInit ()
{
this.currentStep = 1;
}
onContinue (step: number)
{
this.currentStep = step
}
reset ()
{
this.currentStep = 1;
}
}
Then your HTML should look like this:
<div id="1"class="col-xs-12" *ngIf="currentStep === 1">
<table id="reorder" class="table table-responsive table-bordered">
<tr style="background: beige;">
<th>Attitude & Professional Appearance </th>
<th>Max.Score</th>
<th>Score(Employee)</th>
<th>Score(Manager)</th>
<th>Reason for Scoring</th>
</tr>
<tr>
<td>Exude a Positive Image </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Helpful, open and acommodating </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Giving Attention to details </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Ability to Multitask, Followup and Follow through </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Punctuality and attendance</td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text" style=" text-align: center"></td>
</tr>
<tr>
<td>Discipline and Morals </td>
<td>1</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
</tr>
<tr>
<td>Relationship with Superior,peer, surbodinate </td>
<td>2</td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="number" style=" text-align: center"></td>
<td><input type="text"></td>
<td rowspan="3">TOTAL:</td>
</tr>
</table>
<button id="btn1" class="btn-block" type="button" (click)="onContinue(2)" style="float:right">Continue</button>
</div>
And so on...
Upvotes: 1
Related Questions
- How can I use "*ngIf else"?
- *ngIf is not working
- ngIf with "as" and else
- How to use ngIf in Angular
- condition with two *ngIf and one else
- Angular *ngIf Condition
- How to use *ngIf correctly?
- How do I use an if statement in Angular?
- How to use expression in ngIf-else in angular 2
- Use *ngIf on single element of ng for