Angular 8 Checkbox : Angular 8 Checkbox Tutorial with Example

If you have been creating any type of applications till now, you are already aware of the huge significance that a checkbox holds. Not only does it makes the input of data easier to any platform, but it also facilitates the quick sorting of data as it often comes packaged with the list feature.
A checkbox is also known as the tick-box and it is a Graphical User Interface widget that allows a user to choose one or many possible options.
In this article, we will build a checkbox list with Angular but create it dynamically from a list.

Let’s get started!

Install Angular 8 project

If you do not know how to update angular cli, then check out the update angular 8 cli tutorial
If you are unfamiliar with Angular, then check out the Angular 8 tutorial.

Now, create a brand new angular project using the following command.

ng new ang


Now, go inside the folder and open the project in Visual Studio Code.

The next step is to import FormsModule and ReactiveFormsModule inside the app.module.ts file.


// app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
 declarations: [
   AppComponent
 ],
 imports: [
   BrowserModule,
   FormsModule,
   ReactiveFormsModule,
 ],
 providers: [],
 bootstrap: [AppComponent]
})
export class AppModule { }

Define data to show checkbox

Inside the app.component.ts file, we will define the following data.


// app.component.ts

...
cartoonsData: Cartoon[] = [
    { id: 0, name: 'Tom and Jerry' },
    { id: 1, name: 'Rick and Morty' },
    { id: 2, name: 'Ben 10' },
    { id: 3, name: 'Batman: The Animated Series' }
  ];
...

So, in the checkbox, we will display these name values from the above array.
The user then selects their favorite cartoon and submit the form and then in the submit() function, and we will get those selected values.

Define the HTML view for checkbox

Write the following code inside the app.component.html file.


<!-- app.component.html -->

<div style="margin-top: 30px">
<form [formGroup]="form" (ngSubmit)="submit()">
  <div *ngFor="let cartoon of cartoonsData">
    <input type="checkbox" (change)="onChange(cartoon.name, $event.target.checked)" />
    {{ cartoon.name }}
  </div>
  <button>submit</button>
</form>
</div>

In the above code, we have attached a formGroup directive to form and also use the ngSubmit event.

So, when the user clicks on the submit button, the ngSubmit() event fires, and it calls the submit() function.

Then we have used the ngFor directive to display the dynamic checkbox list with the onChange() event.

If the user clicks the checkbox, then change() event will fire, and then cartoon name and checked values are passed to that onChange() function that is associated with that event.

We will define the onChange() function inside the app.component.ts file.

Don’t save the file and go to the browser if you are running the project because you will get the error.
Now, let’s head to the last step.

Define onChange() and submit() function

Okay, so now we have our app.component.html and app.module.ts file complete.

Now, we need to define two main functions to track the checkbox values and get those checked values.

Write the following code inside the app.component.ts file.


// app.component.ts

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

export interface Cartoon {
  id: number;
  name: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  form: FormGroup;
  cartoonsData: Cartoon[] = [
    { id: 0, name: 'Tom and Jerry' },
    { id: 1, name: 'Rick and Morty' },
    { id: 2, name: 'Ben 10' },
    { id: 3, name: 'Batman: The Animated Series' }
  ];

  constructor(private fb: FormBuilder) { }

  onChange(name: string, isChecked: boolean) {
    const cartoons = (this.form.controls.name as FormArray);

    if (isChecked) {
      cartoons.push(new FormControl(name));
    } else {
      const index = cartoons.controls.findIndex(x => x.value === name);
      cartoons.removeAt(index);
    }
  }

  ngOnInit() {
    this.form = this.fb.group({
      name: this.fb.array([])
    });
  }

  submit() {
    console.log(this.form.value.name);
  }
}

In the above code, first, we have imported four forms modules from forms packages.

  1. FormBuilder: It creates the AbstractControl from a user-specified configuration.

  2. FormGroup: It tracks the value and validity state of a group of FormControl instances

  3. FormArray: Tracks the value and validity state of an array of FormControl, FormGroup or FormArray instances

  4. FormControl: It tracks the value and validation status of an individual form control.

Then we have defined the interface Cartoon, which is the type of data of the checkbox.
Then defined a constructor and created FormBuilder instance.

In the next step, we have defined the onChange() function, which takes two parameters.

  1. name

  2. isChecked

If the particular checkbox values are checked, then we are pushing the checked values to the FormArray and removing the values if the user unchecks the checkbox options.

Inside the submit() function, we are getting the checked values array and log it in the console.

Finally, see the output.

This is image title

You can see in the console that an array of two values are logged, which means we have successfully got the checked the values inside the array.

Now, we can send that array to the server and save it inside the database.

#angular #angular8

What is GEEK

Buddha Community

Angular 8 Checkbox : Angular 8 Checkbox Tutorial with Example

I am Developer

1617089618

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

Recommended:-Laravel Try Catch

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners

Clara  Gutmann

Clara Gutmann

1598716260

Angular 8 CRUD Example | Angular 8 Tutorial For Beginners

Angular 8 CRUD is a basic operation to learn Angular from scratch. We will learn how to build a small web application that inserts, read data, update and delete data from the database. You will learn how to create a MEAN Stack web application. In this Angular 8 Tutorial Example, you will learn a new framework by building a crud application.

New features of Angular 8

You check out the new features in brief on my  Angular 8 New Features post.

I have designed this Angular 8 CRUD Tutorial, especially for newcomers, and it will help you to up and running with the latest version of Angular, which is right now 8.

#angular #angular 8 #angular 8 crud

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

I am Developer

1610191977

Angular 11 Google Social Login Example Tutorial

Angular 9/10/11 social login with google using angularx-social-login library example. In this tutorial, i will show you step by step on how to implement google social login in angular 11 app.

And also, this tutorial will show you How to login into Angular 10/11 application with google using angularx-social-login library in angular 11 app.

Google Login Integration In Angular 11 App

  • Step 1 - Create New Angular App
  • Step 2 - Install Social Login Library
  • Step 3 - Add Code on App.Module.ts File
  • Step 4 - Add Code on View File
  • Step 5 - Add Code On App.Component ts File
  • Step 6 - Start the Angular Google Login App

https://www.tutsmake.com/angular-11-google-social-login-example/

#angular 11 google login #angular 11 social-login example #login with google button angular 8/9/10/11 #angular 10/11 login with google #angular 10 social google login #angular social login google

I am Developer

1605329413

Laravel 8 Tutorial For Beginners

In this tutorial, i will provide you some useful tutorial of laravel 8 version. So, you can learn laravel 8 an easy way.

Recommended:- Laravel Eloquent whereRaw Query Example
Recommended:- How to Get Random Records in Laravel
Recommended:- Laravel InsertOrIgnore Example
Recommended:- Laravel whereIn, whereNotIn With SubQuery Example
Recommended:- Laravel Where Null and Where Not Null Query
Recommended:- Laravel Group by Example
Recommended:- Laravel Order by Example
Recommended:- Laravel 8 Joins Example Tutorial
Recommended:- Laravel 8 – Form Validation Example
Recommended:- Laravel 8 Ajax Post Form Data With Validation
Recommended:- Laravel 8 Flash Message Example Tutorial
Recommended:- Laravel 8 Auth Scaffolding using Jetstream
Recommended:- Laravel 8 Autocomplete Search from Database Tutorial
Recommended:- How to Create Controller, Model in Laravel 8 using cmd
Recommended:- How to Use Helper Function in Laravel 8
Recommended:- Laravel 8 Send Mail using Queue Tutorial
Recommended:- Laravel 8 Google Recaptcha V3 Example
Recommended:- Laravel 8 QR Code Generator Tutorial Example
Recommended:- Laravel 8 Image Upload Tutorial
Recommended:- Laravel 8 Ajax Image Upload with Preview Tutorial
Recommended:- Laravel 8 Ajax Multiple Image Upload Tutorial
Recommended:- Laravel 8 FullCalendar Ajax Tutorial Example
Recommended:- Laravel 8 Livewire File Upload Tutorial Example
Recommended:- Laravel 8 Login with Linkedin Example Tutorial
Recommended:- Laravel 8 Multi Auth (Authentication) Tutorial
Recommended:- Laravel 8 Rest API with Passport Tutorial
Recommended:- Laravel 8 JWT Rest API Authentication Example Tutorial
Recommended:- Laravel 8 Datatables with Relationship Tutorial Example
Recommended:- Laravel 8 Joins Example Tutorial
Recommended:- Laravel 8 Summernote Image Upload Tutorial Example
Recommended:- Laravel 8 Crop Image Before Upload using Cropper JS
Recommended:- Laravel 8 – Dynamically Multiple Add or Remove Input Fields using jQuery
Recommended:- Laravel 8 PHP Guzzle Http Client GET & POST Example
Recommended:- Laravel 8 Livewire Datatables Tutorial Example
Recommended:- Laravel 8 Google Chart Tutorial Example
Recommended:- Laravel 8 Generate Fake Data
Recommended:- Laravel 8 Livewire Load More OnScroll Tutorial Example
Recommended:- Laravel 8 Dynamic Dependent Dropdown using Ajax
Recommended:- Laravel 8 Auto Load More Data On Page Scroll
Recommended:- Laravel 8 Simple CRUD Example Tutorial
Recommended:- Laravel 8 Rest API CRUD with Passport Auth Tutorial
Recommended:- Laravel 8 DataTable CRUD Tutorial
Recommended:- Laravel 8 Ajax CRUD Using Datatable Tutorial
Recommended:- Laravel 8 Ajax CRUD with Image Upload Tutorial
Recommended:- Laravel 8 Livewire CRUD with Jetstream Tutorial

#laravel 8 tutorial for beginners #laravel 8 tutorial for beginners step by step #laravel 8 tutorial #laravel 8 authentication tutorial