src/app/home-page/tool-selection/tool-selection.component.ts
Handles the view for selecting tools.
| selector | app-tool-selection |
| styleUrls | tool-selection.component.css |
| templateUrl | ./tool-selection.component.html |
Properties |
|
constructor(toolService: ToolService, courseService: CourseService)
|
||||||||||||
|
Constructor
Parameters :
|
| Public courseService |
courseService:
|
Type : CourseService
|
|
Provides information and management for selected courses.
Used in tool-selection.component.html (i.e. DO NOT DELETE).
|
| Public toolService |
toolService:
|
Type : ToolService
|
|
Provides information and management for available tools.
|
import { Component } from '@angular/core';
import { ToolService } from '../../tool.service';
import { CourseService } from '../../course.service'; // Used in tool-selection.component.html (i.e. DO NOT DELETE)
/**
* Handles the view for selecting tools.
*/
@Component({
selector: 'app-tool-selection',
templateUrl: './tool-selection.component.html',
styleUrls: ['./tool-selection.component.css']
})
export class ToolSelectionComponent {
/**
* Constructor
* @param toolService Provides information and management for available tools.
* @param courseService Provides information and management for selected courses.
* Used in tool-selection.component.html (i.e. DO NOT DELETE).
*/
constructor(public toolService: ToolService, public courseService: CourseService) { }
}
<div [class.frosted]="this.courseService.courseSelectionOpen" class="tools">
<div *ngFor="let tool of this.toolService.toolList" (click)="this.toolService.selectedTool = tool" [routerLink]="[tool.id, 'options']"
style="display: block" class="toolIcon card" [style.display]="tool.toolCategory === this.toolService.selectedCategory.toolCategory ? 'block' : 'none'">
<i class="material-icons charcoal-text">{{tool.icon}}</i>
<p>{{tool.title}}</p>
</div>
</div>
<!-- [style.display]="tool.categories.includes(this.toolService.selectedCategory.categoryId) ? 'block' : 'none'" -->
<!-- Swap out style display with this when its ready -->