Pfthb

I have to compare two dates ie: current date and date stored in json file and then display the name. I have attached the related files required for this.

birthday.component.html

 <div class="birthday-slider">
 <owl-carousel
 [options]="options"
 [carouselClasses]="['owl-theme', 'sliding']">
 <div class="item" *ngFor="let birthday of birthdays;let i = index" >
 <div class="person" >
 <div class="name">birthday.name</div>
 <a [href]="'mailto:'+birthday.email"class="wish"><img src="assets/img/birthdaysicon.png" alt="Wish Birthday Icon" /></a>
 </div>
 </div>
 </owl-carousel> 
 </div>

birthday.component.ts

import Component, OnInit from '@angular/core';
import LoggerService from '../../core/services/logger-service';
import HomeService from '../../core/services/home.service';
import AppConstants from '../../shared/constants/app.constants';


@Component(
 selector: 'app-birthday',
 templateUrl: './birthday.component.html',
 styleUrls: ['./birthday.component.scss']
)
export class BirthdayComponent implements OnInit 
 options;
 today = new Date();
 dateFormat = AppConstants.dateFormat;
 birthdayList = ;

 constructor(private logger: LoggerService, private homeService: HomeService) 

 

 ngOnInit() 
 this.initCarousel();
 this.getBirthdayList();
 

 initCarousel() 
 this.options = 
 items: 4,
 dots: false,
 nav: true,
 slideBy: 4,
 loop: false,
 autoplay: false,
 autoplayTimeout: 15000,
 navText: ['<span class='icon icon-font-icon_right'>', '<span class='icon icon-font-icon_right'>'],
 ;
 
 getBirthdayList() 
 this.homeService.getBirthdayList().subscribe(res => 
 this.logger.log(res);
 this.birthdayList = res.data;
 );

service file looks like this

 getBirthdayList() 
 const url = Url.jsonData.basePath + Url.jsonData.birthday;
 return this.http.doAsyncTask(url, 'GET').map(response => 
 return response;
 );
 

Any help from you guys is really appreciated since i am new to the angular 6. Thanks and regards in advance.

The html goes like this.

 <div class="birthday-slider">
 <owl-carousel
 [options]="options"
 [carouselClasses]="['owl-theme', 'sliding']">
 <div class="item" *ngFor="let birthday of birthdayList;let i = index" >
 <div class="person" >
 <!-- <div class="round-img" [style.background-image]="'url('+birthday.img+')'"></div> -->
 <div class="name">birthday.name</div>
 <a [href]="'mailto:'+birthday.email"class="wish"><img src="assets/img/birthdaysicon.png" alt="Wish Birthday Icon" /></a>
 </div>
 </div>
 </owl-carousel> 
 </div>

The .ts file will look something like this.

import Component, OnInit from "@angular/core";
import LoggerService from "../../core/services/logger-service";
import HomeService from "../../core/services/home.service";
import AppConstants from "../../shared/constants/app.constants";

@Component(
 selector: "app-birthday",
 templateUrl: "./birthday.component.html",
 styleUrls: ["./birthday.component.scss"]
)
export class BirthdayComponent implements OnInit 
 options;
 dateFormat = AppConstants.dateFormat;
 birthdayList = ;
 today = new Date();
 curDate = new Date().getDate();

 constructor(
 private logger: LoggerService,
 private homeService: HomeService
 ) 

 ngOnInit() 
 this.initCarousel();
 this.getBirthdayList();
 

 initCarousel() 
 this.options = 
 items: 4,
 dots: false,
 nav: true,
 slideBy: 4,
 loop: false,
 autoplay: false,
 autoplayTimeout: 15000,
 navText: [
 "<span class='icon icon-font-icon_right'>",
 "<span class='icon icon-font-icon_right'>"
 ]
 ;
 
 getBirthdayList() 
 this.homeService.getBirthdayList().subscribe(res => 
 this.logger.log(res);
 this.birthdayList = res.data;
 this.birthdayList = this.birthdayList.filter(item => 
 return item.bdaydate == this.curDate;
 );
 console.log(this.birthdayList);
 );