Qfyilyi

I am trying to make a calendar of my own using Angular 5.
This is how it looks:

I want to apply a css class for the current day in order to be a different colour

This is my component:

 @Component({

      selector: 'ca-month-header',

      templateUrl: './month-header.component.html',

      styleUrls: ['./month-header.component.css']

    })

    export class MonthHeaderComponent implements OnInit {

      numbers: number = ;

      now: Date = new Date();

      currentYear: number;

      currentMonth: number;

      numberOfDaysCurrentMonth: number;

      monthNames = ['January', 'February', 'March', 'April', 'May', 'June',

      'July', 'August', 'September', 'October', 'November', 'December'

    ];

    currentMonthName = '';

currentDay: number;

      constructor() { }



      ngOnInit() {

        this.currentYear = this.now.getUTCFullYear();

        this.currentMonth = this.now.getMonth() + 1;

        this.currentMonthName = this.monthNames[this.currentMonth - 1];

        this.numberOfDaysCurrentMonth = this.getDaysInMonth(this.currentYear, this.currentMonth);

        for (let i = 1; i <= this.numberOfDaysCurrentMonth; i++) {

          this.numbers[i - 1] = i;

        }

      }

this.currentDay = this.now.getUTCDate();

      getDaysInMonth(year: number, month: number): number {

          return new Date(year, month, 0).getDate();

      }



    }

and a part of my HTML code where I insert the days:

  <div class="wrapper clearfix">

          <div class="left">

              <label class="tag">TAG</label>

           </div>

           <div class="right day-number" *ngFor="let number of numbers"> 

              <label class="number-label"><span></span></label> 

          </div>

      </div>

Should I write a function for this?

No need to write any function just write a class in css to highlight color use that name in the template in component file get current date in a variable

<div class="right day-number" *ngFor="let number of numbers" [ngClass]="{'dayColor':number==currentDate}"> 

          <label class="number-label"><span></span></label> 

      </div>

In .ts file

this.currentDate = new Date().getDate();

In css:

.daycolor{color:red}