src/app/components/issue-category/issue-category.component.ts
| selector | app-issue-category |
| styleUrls | ./issue-category.component.scss |
| templateUrl | ./issue-category.component.html |
Inputs |
| category | |
Type : IssueCategory
|
|
import {Component, Input} from '@angular/core';
import {IssueCategory} from '../../../generated/graphql-dgql';
@Component({
selector: 'app-issue-category',
templateUrl: './issue-category.component.html',
styleUrls: ['./issue-category.component.scss']
})
export class IssueCategoryComponent {
@Input() category: IssueCategory;
}
<ng-container [ngSwitch]="category">
<span *ngSwitchCase="'UNCLASSIFIED'" class="category-box">
<mat-icon [svgIcon]="'issue-uncategorized'" class="category-icon"></mat-icon>
Uncategorized
</span>
<span *ngSwitchCase="'BUG'" class="category-box">
<mat-icon [svgIcon]="'issue-bug'" class="category-icon"></mat-icon>
Bug
</span>
<span *ngSwitchCase="'FEATURE_REQUEST'" class="category-box">
<mat-icon [svgIcon]="'issue-feature'" class="category-icon"></mat-icon>
Feature Request
</span>
</ng-container>
./issue-category.component.scss
.category-icon {
vertical-align: middle;
margin-bottom: 3px;
}
.category-box {
background: rgba(0, 0, 0, 0.06);
border-radius: 8px;
align-items: center;
padding: 5px;
}