ccims documentation
  1. Components
  2. ProjectHeaderComponent

File

src/app/project-header/project-header.component.ts

Description

This component displays the name and the id of a project

Metadata

selector app-project-header
styleUrls ./project-header.component.scss
templateUrl ./project-header.component.html

Index

Inputs

Inputs

projectId
Type : string
Defined in src/app/project-header/project-header.component.ts:13
projectName
Type : string
Defined in src/app/project-header/project-header.component.ts:12
 
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;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""