src/app/manage-learn/shared/components/metadata-actions/metadata-actions.component.ts
OnInit
| selector | app-metadata-actions |
| styleUrls | ./metadata-actions.component.scss |
| templateUrl | ./metadata-actions.component.html |
Methods |
Inputs |
Outputs |
constructor()
|
| actionItems | |
Type : any
|
|
| actionEvent | |
Type : EventEmitter
|
|
| action | ||||
action(event)
|
||||
|
Parameters :
Returns :
void
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
import { Component, OnInit,Input,Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-metadata-actions',
templateUrl: './metadata-actions.component.html',
styleUrls: ['./metadata-actions.component.scss'],
})
export class MetadataActionsComponent implements OnInit {
@Input() actionItems:any;
@Output() actionEvent = new EventEmitter();
constructor() { }
ngOnInit() {}
action(event){
this.actionEvent.emit(event);
}
}
<div class="sb-dt-card-actions">
<div class="wrapper sb-btn-tile-group btn-space-btwn">
<button *ngFor="let actionItem of actionItems" (click)="action(actionItem.action)" slot="icon-only"
class="card-button">
<ion-icon name="{{actionItem?.icon}}" class="card-icons icon-style {{actionItem.color}}">
</ion-icon>
<p class="card-text">{{actionItem?.title| translate}}
</p>
</button>
</div>
</div>
./metadata-actions.component.scss
@import "src/assets/styles/_variables.scss";
.card-icons {
font-size: 1.875rem;
}
.primary {
color: $blue;
}
.success {
color: $green;
}