sunbirded-mobile-app documentation
  1. Components
  2. ProjectDetailsCardComponent

File

src/app/manage-learn/shared/components/project-details-card/project-details-card.component.ts

Implements

OnInit

Metadata

selector app-project-details-card
styleUrls ./project-details-card.component.scss
templateUrl ./project-details-card.component.html

Index

Methods
Inputs

Constructor

constructor()
Defined in src/app/manage-learn/shared/components/project-details-card/project-details-card.component.ts:10

Inputs

categories
Type : {}
Default value : []
Defined in src/app/manage-learn/shared/components/project-details-card/project-details-card.component.ts:10
data
Type : any
Defined in src/app/manage-learn/shared/components/project-details-card/project-details-card.component.ts:9

Methods

ngOnInit
ngOnInit()
Defined in src/app/manage-learn/shared/components/project-details-card/project-details-card.component.ts:13
Returns : void 
import { Component, OnInit,Input } from '@angular/core';

@Component({
  selector: 'app-project-details-card',
  templateUrl: './project-details-card.component.html',
  styleUrls: ['./project-details-card.component.scss'],
})
export class ProjectDetailsCardComponent implements OnInit {
@Input() data:any;
@Input() categories = [];
constructor() {}

  ngOnInit() {}
}

<ion-card class="project-box">
  <ion-card-content>
    <div class="custom-filed">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_OBJECTIVE' | translate}} : </ion-label>
      {{data?.description}}
    </div>
    <div class="custom-filed" *ngIf="categories?.length">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_CATEGORIES' | translate}} : </ion-label>
      {{categories}}
    </div>
    <div class="custom-filed" *ngIf="data?.recommendedFor && data?.recommendedFor?.length">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_RECOMMENDED_FOR' | translate}} : </ion-label>
      <span *ngFor="let recommend of data?.recommendedFor; let last = last"> {{recommend.code}}<span *ngIf="!last">,</span> </span>
    </div>
    <div class="custom-filed" *ngIf="data?.startDate">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_START_DATE' | translate}} : </ion-label>
      {{data?.startDate | date : 'dd/MM/yyyy' }}
    </div>
    <div class="custom-filed" *ngIf="data?.endDate">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_END_DATE' | translate}} : </ion-label>
      {{data?.endDate | date : 'dd/MM/yyyy' }}
    </div>
    <div class="custom-filed" *ngIf="data?.duration">
      <ion-label position="fixed"> {{'FRMELEMNTS_LBL_DURATION' | translate}} : </ion-label>
      {{data?.duration?.label || data?.duration }}
    </div>
    
  </ion-card-content>
</ion-card>

./project-details-card.component.scss 

@import "src/assets/styles/_variables.scss";
.project-box {
  margin: 15px 0px;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 1px -2px, rgba(0, 0, 0, 0.14) 0px 6px 6px 0px,
    rgba(0, 0, 0, 0.12) 0px 0px 0px 0px;
  .custom-filed {
    margin: 10px 0px;

    ion-label {
      font-weight: 600;
      color: #{$black-color};
    }

    ion-icon {
      float: right;
      font-size: 1.5rem;
      margin-top: -5px;
    }

    ion-col {
      padding: 0px;
    }
  }
}

ion-card {
  background-color: map-get($colors, white);
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""