Sunbird Portal Documentation
  1. Components
  2. CourseDetailsComponent

File

src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts

Metadata

selector app-course-details
styleUrls ./course-details.component.scss
templateUrl ./course-details.component.html

Index

Properties
Inputs

Constructor

constructor(resourceService: ResourceService, generaliseLabelService: GeneraliseLabelService)
Defined in src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts:12
Parameters :
Name Type Optional
resourceService ResourceService No
generaliseLabelService GeneraliseLabelService No

Inputs

courseHierarchy
Type : any
Defined in src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts:11

Properties

Public generaliseLabelService
Type : GeneraliseLabelService
Defined in src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts:14
readMore
Default value : false
Defined in src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts:12
Public resourceService
Type : ResourceService
Defined in src/app/modules/learn/components/course-consumption/course-details/course-details.component.ts:14
 
import { Component, Input } from '@angular/core';
import {ResourceService } from '@sunbird/shared';
import { GeneraliseLabelService } from '@sunbird/core';

@Component({
  selector: 'app-course-details',
  templateUrl: './course-details.component.html',
  styleUrls: ['./course-details.component.scss']
})
export class CourseDetailsComponent {
  @Input() courseHierarchy: any;
  readMore = false;

  constructor(public resourceService: ResourceService, public generaliseLabelService: GeneraliseLabelService) { }
}

<div class="training-info" *ngIf="courseHierarchy">
  <h4 class="font-weight-bold">{{resourceService?.frmelmnts?.lbl?.courseDetails}}</h4>
  <div class="training-relevant mb-16">
    <h6 class="mt-0 mb-8 fsmall training-relevant__heading">{{resourceService?.frmelmnts?.lbl?.courseRelevantFor}}</h6>
    <div class="training-relevant__class mb-4 sb-color-gray-400 fnormal" *ngIf="courseHierarchy?.se_boards">
      <span>{{resourceService?.frmelmnts?.lbl?.board | transposeTerms: 'frmelmnts.lbl.board' : resourceService?.selectedLang}}:&nbsp;</span><span>{{ courseHierarchy?.se_boards?.join(', ')}}</span>
    </div>
    <div class="training-relevant__medium mb-4 sb-color-gray-400 fnormal" *ngIf="courseHierarchy?.se_mediums">
      <span>{{resourceService?.frmelmnts?.lbl?.medium | transposeTerms: 'frmelmnts.lbl.medium' : resourceService?.selectedLang}}:&nbsp;</span><span>{{ courseHierarchy?.se_mediums?.join(', ')}}</span>
    </div>
    <div class="training-relevant__subject mb-4 sb-color-gray-400 fnormal" *ngIf="courseHierarchy?.se_gradeLevels">
      <span>{{resourceService?.frmelmnts?.lbl?.class | transposeTerms: 'frmelmnts.lbl.class' : resourceService?.selectedLang}}:&nbsp;</span><span>{{ courseHierarchy?.se_gradeLevels?.join(', ')}}</span></div>
    <!-- <div class="training-relevant__medium mb-4 sb-color-gray-400 fnormal" *ngIf="courseHierarchy?.se_subjects">
      <span>{{resourceService?.frmelmnts?.lbl?.subject}}:&nbsp;</span><span>{{ courseHierarchy?.se_subjects?.join(', ')}}</span>
    </div> -->
    <div class="training-relevant__medium mb-4 sb-color-gray-400 fnormal" *ngIf="courseHierarchy?.audience">
      <span>{{resourceService?.frmelmnts?.lbl?.userType}}:&nbsp;</span><span>{{ courseHierarchy?.audience?.join(', ')}}</span>
    </div>
    <div *ngIf="courseHierarchy?.description">
      <label class="fsmall mt-16 mb-8">{{resourceService?.frmelmnts?.lbl?.description}}</label>
      <p *ngIf="!readMore" class="traning-relevant__description sb-color-gray-400 fnormal">
        {{ courseHierarchy?.description | slice:0:200 }}&nbsp;
        <span class="ui cardsKnowMore mouse-pointer"
          *ngIf="courseHierarchy?.description?.length > 200 && readMore === false"
          tabindex="0" (click)="readMore = !readMore;">{{resourceService?.frmelmnts?.lbl?.readmore}}</span>
      </p>
      <p *ngIf="readMore" class="traning-relevant__description sb-color-gray-400">
        {{ courseHierarchy?.description}}&nbsp;
        <span class="ui cardsKnowMore mouse-pointer"
          tabindex="0" (click)="readMore = false;">{{resourceService?.frmelmnts?.lbl?.readless}}</span>
      </p>
    </div>
  </div>
</div>

./course-details.component.scss 

.training-info {
    word-break: break-word;
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""