I have designed a custom component that functions like this:
student.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'student',
templateUrl: 'student.html'
})
export class StudentComponent {
@Input() name: string;
public status: string;
public notes: string;
public tardyTime: string;
public isTardy : boolean = false;;
constructor() {
}
tardyClicked(){
this.isTardy = true;
}
notTardy(){
this.isTardy = false;
}
}
Here's the template structure:
student.html
<h4 class="padding">{{name}}</h4>
<ion-segment [(ngModel)]="status">
<ion-segment-button value="p" (ionSelect)="notTardy()">
Present
</ion-segment-button>
<ion-segment-button value="t" (ionSelect)="tardyClicked()" >
Tardy
</ion-segment-button>
<ion-segment-button value="a" (ionSelect)="notTardy()">
Absent
</ion-segment-button>
</ion-segment>
<ion-item *ngIf="isTardy" >
<ion-label>Tardy Time:</ion-label>
<ion-datetime displayFormat="h:mm a" [(ngModel)]="tardyTime"></ion-datetime>
</ion-item>
<ion-item>
<ion-input [(ngModel)]= "notes" type="text" placeholder="Notes:"></ion-input>
</ion-item>
When implementing the custom component in my application, I do it as follows:
page.html
<ion-content padding>
<ion-list>
<student *ngFor="let student of studentArray" [name]="student" ></student>
</ion-list>
<p>
<button ion-button color="primary" (click)="showPrompt()" block>Submit</button>
</p>
</ion-content>
I am interested in creating an array of objects in my page.ts file that gathers information from the student components and creates an object for each, with properties such as:
{
name : studentcomponent.name
status : studentcomponent.status
}
Do you think this is achievable?