src/app/project-header/project-header.component.ts
This component displays the name and the id of a project
| selector | app-project-header |
| styleUrls | ./project-header.component.scss |
| templateUrl | ./project-header.component.html |
Inputs |
| projectId | |
Type : string
|
|
| projectName | |
Type : string
|
|
import {Component, Input} from '@angular/core';
/**
* This component displays the name and the id of a project
*/
@Component({
selector: 'app-project-header',
templateUrl: './project-header.component.html',
styleUrls: ['./project-header.component.scss']
})
export class ProjectHeaderComponent {
@Input() projectName: string;
@Input() projectId: string;
}
<div class="project-title-row">
<!-- Icon source: https://github.com/logos -->
<img alt="Github icon" src="../assets/icons/github-icon.png" class="icon" />
<div class="content">
<p class="title">{{ projectName }}</p>
<div class="sub-sub-title">Project ID: {{ projectId }}</div>
</div>
</div>
./project-header.component.scss
.project-title-row {
align-items: center;
width: fit-content;
}
.icon {
float: left;
vertical-align: top;
margin-right: 5px;
max-height: 64px;
max-width: 64px;
}
.content {
float: left;
}
.title,
.sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3f3f3f;
}