Pipes in Angular

Angular 10 WeekDay API

Last Updated : 14 Jun, 2021

In this article, we are going to see what is WeekDay in Angular 10 and how to use it. The WeekDay API in Angular10 is used to get the value for each day of the week.

Syntax:

enum WeekDay {
  Sunday: 0
  Monday
  Tuesday
  Wednesday
  Thursday
  Friday
  Saturday
}

NgModule: Module used by WeekDay is:

CommonModule

Approach:

Create an angular app that to be used.
Import WeekDay to your app.component.ts file.
Define week day variable in app.component.ts
In app.component.html, use weekDay variable to get index values of week day.
Serve the angular app using ng serve to see the output.

Example:

app.component.ts

import { Component, Inject } from '@angular/core';
import { PLATFORM_ID } from '@angular/core';
import { WeekDay } from '@angular/common';
import { isPlatformWorkerApp } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  public weekDays: WeekDay[] = [
      WeekDay.Monday, 
      WeekDay.Tuesday, 
      WeekDay.Wednesday, 
      WeekDay.Thursday, 
      WeekDay.Friday, 
      WeekDay.Saturday, 
      WeekDay.Sunday];
}

app.component.html

<h1>GeeksforGeeks</h1>
<select>
  <option *ngFor="let day of weekDays" value="day">
        Day No:{{day}}
   </option>                           
</select>

Output:

Reference: https://angular.io/api/common/WeekDay

Pipes in Angular

T

taran910

Improve

Article Tags :

Similar Reads

Angular 10 DatePipe API

In this article, we are going to see what is DatePipe in Angular 10 and how to use it. DatePipe is used to format a date value according to locale rules. Syntax: {{ value | date }} Approach:Â Create the angular app that to be used.There is no need for any import for the DatePipe to be used.In app.co

Weather App Using Angular

We will be creating a weather application using the Angular framework. This app will allow users to check the current weather conditions by entering a city name. It will provide detailed information including temperature, weather description, wind speed, and humidity. With responsive design and inte

Angular 10 formatDate() Method

In this article, we are going to see what is formatDate in Angular 10 and how to use it. formatDateÂ is used to format a date according to locale rules. Syntax: formatDate(value, locale, format, timezone) Parameters: value: The number to format.locale: A locale code for the locale format.format: The

Pipes in Angular

Pipes are often used for formatting dates, numbers, and Strings and they can be customized to suit various needs. In this article, we explain about how to use pipes in Angular with examples and related outputs for your reference.Prerequisites:To understand this article you should have knowledge of t

Angular 7 | Directives

Directives in Angular 7 are Typescript class which is declared with decorator @Directive. These are the Document Object Model (DOM) instruction sets, which decide how logic implementation can be done.Angular directives can be classified into three types:Â Â Component Directives: It forms the main cla

Angular Material Datepicker

Angular Material is a UI component library that is developed by Google so that Angular developers can develop modern applications in a structured and responsive way. By making use of this library, we can greatly increase the user experience of an end-user thereby gaining popularity for our applicati