I am new to angular js and I would like to sort my array of events by date. Newer events first then older. I have a separate array file for the events.
Here is my array file, newsList.ts
export const newsList = [
{
title:'FilPass Holds Talk on Construction new Technology',
author: {
name: 'Hazel Chua',
date: 'June 3, 2021',
},
readTime: 7,
innerHTML: `<img src="../../../../assets/img/Newsroom/bloger.jpg" class="img-fluid w-100 mb-3" alt="">
<p class="para-heading">FilPass Tamperproof Tech Inc. launched on July 23 the Industry-Academe Linkage for Construction Series in pursuit of introducing its flagship project, the Construction Industry One Registry System or CIORS, to the Philippine construction industry, academe, and non-profit organizations.</p>
<p class="para">As part of the 4-part series, FilPass will be holding a panel discussion titled, “Industry Academe Linkage for Construction Series: How the Construction Industry Adapts to New Technologies”, taking place on August 18, 2021, from 10:00 A.M. to 11:30 A.M. via AirMeet and streamed live on FilPass’ Facebook page.</p>
<img src="../../../../assets/img/Newsroom/fpp-2.png" class="img-fluid w-100 mb-3" alt="">
<br>
<blockquote class="blockquote"><p>The event will also serve as a mass memorandum of agreement signing for FilPass’ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p></blockquote>
<p class="para">It will be graced by esteemed trailblazers of the Philippine construction industry namely Engr. Jomel Molabola of Engineering Wins PH, Engr. Ralp Rivas of @itsaralp, Civil Engr. Samuel Pacba of the Technological University of the Philippines, and Gaze Kasilag-Del Castillo, Chair and President of FilPass.</p>
<p class="para">The event will also serve as a mass memorandum of agreement signing for FilPass’ CIORS ambassadors, partners from the construction industry and academe, different partner merchants, and media partners.</p>
<p class="para">Adding to that, FilPass ID holders, particularly CIORS signees, will get to enjoy exciting discounts and vouchers from five and counting partner merchants to be presented on the event. Meanwhile, a raffle contest is currently happening over FilPass’ Facebook page where different cash prizes await three special winners.</p>
<img src="../../../../assets/img/Newsroom/fp-3.jpeg" class="img-fluid w-100 mb-3" alt="">
<p class="para">If you are a student, worker, and professional related in the field of construction, you may still register for the event by heading over to this link: <a href="https://rfr.bz/f36c40p">https://rfr.bz/f36c40p </a></p>
<p class="para">Watch out for more virtual events FilPass has in store for you! Follow FilPass on their social media pages Facebook and Instagram to stay updated.</p>`,
postLink: ['/news-article', 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-')],
paramLink: 'FilPass Holds Talk on Construction new Technology'.toLowerCase().split(' ').join('-'),
thumbnail: '../../../../assets/img/cropBlog4.jpg'
},
This is my JS file where I will put the sortEvents() function:
import { Component, OnInit } from '@angular/core';
import { newsList } from 'src/app/constants/newsList';
@Component(
{
selector: 'app-all-news-page',
templateUrl: './all-news-page.component.html',
styleUrls: ['./all-news-page.component.scss']
})
export class AllNewsPageComponent implements OnInit {
newsList:any;
constructor() { }
ngOnInit(): void {
this.newsList = newsList;
}
sortDate() {
//INSERT CODE HERE
}}
This is my HTML file:
<div class="news-section">
<div class="row d-flex my-2">
<div class="col d-flex justify-content-evenly py-3 px-5">
<div class="card-group justify-content-evenly">
<div *ngFor="let news of newsList">
<a [routerLink]="news.postLink">
<div class="card border rounded shadow thumbnail"><img class="card-img-top w-100 d-block thumbnail-img" [src]="news.thumbnail" />
<div class="card-body">
<h6 class="card-title">{{ news.title }}</h6>
<div class="row g-0">
<div class="col-auto"><img class="blogger" [src]="news.author.photo"></div>
<div class="col align-self-center p-1 author-details">
<h6 class="m-0 author-details__name">{{ news.author.name }}</h6>
<p class="author-details__date">{{ news.author.date }} * {{ news.readTime }} min read</p>
</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
Override sort function, parse Date and compare it
this.newsList.sort((a,b)=>{
const dt1 = Date.parse(a.author.date);
const dt2 = Date.parse(b.author.date);
if (dt1 < dt2) return 1;
if (dt1 > dt2) return -1;
return 0;
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments