Alfie Mellor

Alfie Mellor

1582168126

How to use Calendar in Angular 9

Hello programming buddies! In this Angular 9 Calendar tutorial, we are going to learn how to implement and use various calendar modules using Bootstrap and ngx-bootstrap datepicker plugin.

We are going to use datepicker to implement Calendar.

Date pickers is a generic, predictable, consistent and often viewed as a reliable UI component for date selection. We are going to integrate date-picker with the ngx-bootstrap plugin.

A user can select and navigation between various dates using calendar UI templates, set ranges for scheduling multiple appointments and meetings.

Datepicker is a highly configurable component that adds calendar view functionality to your web and mobile templates. You can customize the date format and language, restrict the selectable date ranges.

In this tutorial, we will walk through the following steps to describe how to use Calendar in Angular component with convenient features mentioned below:

Table of Contents

  • Angular 9 Calendar Integration Example
  • Setting up Angular Project
  • Configure Calendar Module in Angular 9
  • Import Date Picker in AppModule
  • Use Basic Calendar in Angular
  • Adding Animation in Calendar
  • Angular 9/8 Date Range Picker in Calendar
  • Hide Calendar Datepicker UI on Scroll
  • Set Min & Max Date in Datepicker
  • DatePicker with Angular Reactive Form
  • Conclusion

Angular 9 Calendar Integration Example

Following is the comprehensive step by step guide on integrating the calendar in Angular application.

Setting up Angular Project

Run the following command to create a new angular application.

ng new angular-calendar-app

Get inside the project folder:

cd angular-calendar-app

Once the angular app is downloaded from npm, then go through the given below steps.

Configure Calendar Module in Angular 9

In order to work with dates in Angular, we need to install the two packages via node package manager (npm).

First, run the command to install Bootstrap 4:

npm install bootstrap --save

Next, we are going to install ngx-bootstrap package in our Angular app and it works only with Bootstrap.

npm install ngx-bootstrap --save

Then, Add the Bootstrap, NGX Datepicker CSS path in angular.json file to enable the styling of Bootstrap and Calendar UI components.

"styles": [
     "node_modules/bootstrap/dist/css/bootstrap.min.css",
     "node_modules/ngx-bootstrap/datepicker/bs-datepicker.css",
     "src/styles.css"
]

Start the app in the browser using the given below command:

ng serve --open

Import Date Picker in AppModule

To get started with the calendar, we need to import the date picker in Angular’s main module file.

Open app.module.ts file and add the following code.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Datepicker module
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    BsDatepickerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Use Basic Calendar in Angular

In this step, we will learn how to create a simple calendar, Add the following code in your Angular template.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            placeholder="Datepicker"
            class="form-control"
            bsDatepicker>
    </div>
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input type="text"
            placeholder="Daterangepicker"
            class="form-control"
            bsDaterangepicker>
    </div>
  </div>
</div>

To display the calendar module on the screen, a user needs to click on the HTML input field, and then a user can select a date fro the Calendar view.

Basic Calendar Example in Angular

Adding Animation in Calendar

Adding animation in Angular Calendar is comfortable with ngx-bootstrap. Add the following HTML code in your angular template.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      type="text"
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      [bsConfig]="{ isAnimated: true }">
    </div>
  </div>
</div>

For enabling the animation in Calendar, we bind bsConfig tag, set isAnimated value to true in HTML input field.

Adding Animation in Calendar

Angular 9/8 Date Range Picker in Calendar

Integrating Date Range Picker in Calendar is turned on by just adding the bsDaterangepicker directive in datepicker HTML input field.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      type="text"
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      bsDaterangepicker
      [bsConfig]="{ isAnimated: true }">
    </div>
  </div>
</div>

Angular 9/8 Date Range Picker in Calendar

You can see the Calendar template will popup with two calendar view, in here you can set the dates between two ranges.

Hide Calendar Datepicker UI on Scroll

In this step, i am going to tell you how can you easily hide the Datepicker Calendar UI on user scrolling, usually calendar pop up box stays visible when the user scrolls.

The datepicker UI seems a bit awkward, let’s add the following code in your template, and it surely fixes the hide on scroll issue.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker>
    </div>
  </div>
</div>

Code goes to angular.component.ts file:

import { Component, HostListener, ViewChild } from '@angular/core';
import { BsDatepickerDirective } from 'ngx-bootstrap/datepicker';
import { componentFactoryName } from '@angular/compiler';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  @ViewChild(BsDatepickerDirective, { static: false }) datepicker: BsDatepickerDirective;

  @HostListener('window:scroll')
  onScrollEvent() {
    this.datepicker.hide();
  }
}

Import HostListener, ViewChild and BsDatepickerDirective API at the top of your angular component.

The @ViewChild() directive access the datepicker properties, bind the scroll event with HostListener scroll event to call the this.datepicker.hide() method to hide the calendar on the scroll.

Set Min & Max Date in Datepicker

Now, we are going to learn the easy way to set up the min and max date range in Angular DatePicker calendar.

The input field requires to add minDate and maxDate properties. Check out the given below example where we are using minDate for declaring previous dates and maxDate for current and future days for the upcoming 10 days.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      placeholder="Datepicker"
      class="form-control"
      bsDatepicker
      [minDate]="minDate"
      [maxDate]="maxDate">
    </div>
    <div class="col-xs-12 col-12 col-md-4 form-group">
      <input
      placeholder="Datepicker"
      class="form-control"
      bsDaterangepicker
      [minDate]="minDate"
      [maxDate]="maxDate">
    </div>
  </div>
</div>

Add the following code in Angular TypeScript template.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  minDate: Date;
  maxDate: Date;

  constructor() {
    this.minDate = new Date();
    this.maxDate = new Date();
    this.minDate.setDate(this.minDate.getDate() - 4);
    this.maxDate.setDate(this.maxDate.getDate() + 10);
  }
}

DatePicker with Angular Reactive Form

As we know, DatePicker is a form component, and it always a good practice to set the valid data in the form object.

Reactive forms provide a model-driven approach to handling form inputs whose values change over time. This guide shows you how to create and update a simple form control, progress to using multiple controls in a group, validate form values, and implement more advanced forms.

Reactive forms use an explicit and immutable approach to managing the state of a form at a given point in time. Each change to the form state returns a new state, which maintains the integrity of the model between changes.

To get more details about Reactive Forms, do check out: https://angular.io/guide/reactive-forms.

In this example, we will learn how to set up DatePicker with Angular Reactive Forms.

To get started with we need to import ReactiveFormsModule in the main app.module.ts file. Also import FormGroup, FormControl in app component file.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  myForm: FormGroup;
  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.myForm = this.fb.group({
      date: null,
      range: null
    });
  }
}

The FormGroup define using formGroupName for the form; the FormControl represents the individual form value and also responsible for holding the validation state.

Declare the formControlName in DatePicker component to communicate with the Reactive Forms.

<div class="container">
  <form [formGroup]="myForm">
    <div class="row">
      <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
        <input type="text" class="form-control mb-3" placeholder="Datepicker" bsDatepicker formControlName="date" />
        <pre *ngIf="myForm.value.date" class="code-preview">{{myForm.value.date | date}}</pre>
      </div>
      <div class="col-xs-12 col-12 col-sm-6 col-md-4 form-group">
        <input type="text" class="form-control mb-3" placeholder="Daterangepicker" bsDaterangepicker
          formControlName="range" />
        <pre *ngIf="myForm.value.range"
          class="code-preview">from {{myForm.value.range[0] | date}} to {{myForm.value.range[1] | date}}</pre>
      </div>
    </div>
  </form>
</div>

Conclusion

Finally, we have completed Angular 9 Calendar tutorial, In this tutorial we learned how to add ngx-bootstrap and datepicker plugin and how to use multiple Calendar modules in an Angular app. We also learned to add a simple and advance calendar in the Angular application.

Happy Coding!

#angular #web-development

What is GEEK

Buddha Community

How to use Calendar in Angular 9
Clara  Gutmann

Clara Gutmann

1599459851

Angular Sass: How To Use Sass In Angular 9 Tutorial

Angular supports Sass, CSS, and Less to style global application styles as well as component styles. Angular components styles have an effective CSS encapsulation mechanism that assures any component CSS is local to the component and does not globally alter any styles.

Angular Sass Example

Why use Angular Sass? Well!! Sass (Syntactically Awesome Style Sheets) is an extension of CSS that allows you to use things like variables, nested rules, inline imports, and more. It also supports you to keep things organized and enables you to create style sheets faster.

In short,  Sass is a CSS preprocessor, which combines unique features such as variables, nested rules, and mixins (sometimes referred to as syntactic sugar) into regular CSS. The main object of Sass is to make the CSS coding process more comfortable and more efficient.

Sass is compatible with all versions of CSS. When working with the Angular CLI, the default stylesheets have the .css extension. We are using Angular CLI 8. So, if you have not used previously, then please upgrade your  CLI version. We will use the Bootstrap 4 Framework for this demo and see how we can configure the Sass in our Angular 9 application.

#angular #angular 9 #angular cli #css #angular sass

Christa  Stehr

Christa Stehr

1598940617

Install Angular - Angular Environment Setup Process

Angular is a TypeScript based framework that works in synchronization with HTML, CSS, and JavaScript. To work with angular, domain knowledge of these 3 is required.

  1. Installing Node.js and npm
  2. Installing Angular CLI
  3. Creating workspace
  4. Deploying your First App

In this article, you will get to know about the Angular Environment setup process. After reading this article, you will be able to install, setup, create, and launch your own application in Angular. So let’s start!!!

Angular environment setup

Install Angular in Easy Steps

For Installing Angular on your Machine, there are 2 prerequisites:

  • Node.js
  • npm Package Manager
Node.js

First you need to have Node.js installed as Angular require current, active LTS or maintenance LTS version of Node.js

Download and Install Node.js version suitable for your machine’s operating system.

Npm Package Manager

Angular, Angular CLI and Angular applications are dependent on npm packages. By installing Node.js, you have automatically installed the npm Package manager which will be the base for installing angular in your system. To check the presence of npm client and Angular version check of npm client, run this command:

  1. npm -v

Installing Angular CLI

  • Open Terminal/Command Prompt
  • To install Angular CLI, run the below command:
  1. npm install -g @angular/cli

installing angular CLI

· After executing the command, Angular CLI will get installed within some time. You can check it using the following command

  1. ng --version

Workspace Creation

Now as your Angular CLI is installed, you need to create a workspace to work upon your application. Methods for it are:

  • Using CLI
  • Using Visual Studio Code
1. Using CLI

To create a workspace:

  • Navigate to the desired directory where you want to create your workspace using cd command in the Terminal/Command prompt
  • Then in the directory write this command on your terminal and provide the name of the app which you want to create. In my case I have mentioned DataFlair:
  1. Ng new YourAppName

create angular workspace

  • After running this command, it will prompt you to select from various options about the CSS and other functionalities.

angular CSS options

  • To leave everything to default, simply press the Enter or the Return key.

angular setup

#angular tutorials #angular cli install #angular environment setup #angular version check #download angular #install angular #install angular cli

Shawn  Durgan

Shawn Durgan

1595337366

Angular 9 CRUD by Example

Throughout this Angular 9 CRUD tutorial, we’ll be learning to implement CRUD operations by example using the latest Angular 9 version that has been released recently with Ivy support.

> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular development.

We’ll make use of a CRUD REST API built using json-server which allows you to generate a full working REST API in no time.

What’s CRUD?

CRUD stands for Create, Read. Update and Delete — a set of operations often implemented in web apps to allow users to interact with a database.

In our tutorial, we’ll only focus on building the front-end using Angular 9, the back-end will be mocked using json-server.

We’ll not be learning how to use json-server but you can see the complete instructions from this tutorial after creating the Angular 9 project.

Angular 9 CRUD Tutorial Steps

  • Step 1 — Mocking the Backend Using json-server
  • Step 2 — Creating an Angular 9 Module
  • Step 3 — Importing Angular HttpClientModule and FormsModule
  • Step 4 — Creating Angular 9 Component(s)
  • Step 5 — Adding Angular 9 Routing
  • Step 6 — Creating an Angular 9 Service
  • Step 7 — Creating a Model
  • Step 8 — Implementing the CRUD Methods
  • Step 9 — Calling the CRUD Methods

#angular #angular-9 #angular 9 crud

Ayyaz Zafar

1624138795

Angular Material Autocomplete - Multiple Use Cases covered

Learn How to use Angular Material Autocomplete Suggestions Search Input. I covered multiple use cases.

Please watch this video. I hope this video would be helpful for you to understand it and use it in your projects

Please subscribe: https://www.youtube.com/channel/UCL5nKCmpReJZZMe9_bYR89w

#angular #angular-material #angular-js #autocomplete #angular-material-autocomplete #angular-tutorial

Roberta  Ward

Roberta Ward

1593184320

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular.

Angular is a Typescript-based open-source front-end web application platform. The Angular Team at Google and a community of individuals and corporations lead it. Angular lets you extend HTML’s syntax to express your apps’ components clearly. The angular resolves challenges while developing a single page and cross-platform applications. So, here the meaning of the single-page applications in angular is that the index.html file serves the app. And, the index.html file links other files to it.

We build angular applications with basic concepts which are NgModules. It provides a compilation context for components. At the beginning of an angular project, the command-line interface provides a built-in component which is the root component. But, NgModule can add a number of additional components. These can be created through a template or loaded from a router. This is what a compilation context about.

What is a Component in Angular?

Components are key features in Angular. It controls a patch of the screen called a view. A couple of components that we create on our own helps to build a whole application. In the end, the root component or the app component holds our entire application. The component has its business logic that it does to support the view inside the class. The class interacts with the view through an API of properties and methods. All the components added by us in the application are not linked to the index.html. But, they link to the app.component.html through the selectors. A component can be a component and not only a typescript class by adding a decorator @Component. Then, for further access, a class can import it. The decorator contains some metadata like selector, template, and style. Here’s an example of how a component decorator looks like:

@Component({
    selector: 'app-root',
    templateUrl: 'app.component.html',
    styleUrls: ['app.component.scss']
})

Role of App Module

Modules are the package of functionalities of our app. It gives Angular the information about which features does my app has and what feature it uses. It is an empty Typescript class, but we transform it by adding a decorator @NgModule. So, we have four properties that we set up on the object pass to @NgModule. The four properties are declarations, imports, providers, and bootstrap. All the built-in new components add up to the declarations array in @NgModule.

@NgModule({
declarations: [
  AppComponent,
],
imports: [
  BrowserModule,
  HttpClientModule,
  AppRoutingModule,
  FormsModule
],
bootstrap: [AppComponent]
})

What is Data Binding?

Data Binding is the communication between the Typescript code of the component and the template. So, we have different kinds of data binding given below:

  • When there is a requirement to output data from our Typescript code in the HTML template. String interpolation handles this purpose like {{data}} in HTML file. Property Binding is also used for this purpose like [property] = “data”.
  • When we want to trigger any event like clicking a button. Event Binding works while we react to user events like (event) = “expression”.
  • When we can react to user events and output something at the same time. Two-way Binding is used like [(ngModel)] = “data”.

image for understanding data binding

#angular #javascript #tech blogs #user interface (ui) #angular #angular fundamentals #angular tutorial #basics of angular