how to create login form with Angular 6 with Boostrap 4

1. You must use Bootstrap 4 for styling. The aesthetic result will not be evaluated.

2. It should have the following pages:

a. Login: Complete the login process (you can make it mock). It will be the only page available for those who have not entered the site.

b. Home page: It will include a data table * which will support paging.

c. Contact me: It will include your actual contact information as you sent it to your resume.

3. The Home page table will provide view, edit, delete for each item. The home page will also offer the "create new" feature that will allow you to enter a new row in the table.

4. There will be a menu to move between the Home and Contact me pages.

5. Create and edit forms will have Save and Cancel. Cancel will ask for confirmation if form fields have been processed beforehand.

Assume that your job will be the start of a new major project involving several developers and it is legitimate for your code to be as reusable as possible.

* For data you can use any online API that supports the required CRUD functions. B.C. Resource "Users" at https://jsonplaceholder.typicode.com/

Hi Dave,

Refer the following Links

1. Login :- https://stackblitz.com/edit/angular-6-registration-login-example

2. Home page with datatable and pagination :- https://www.code-sample.com/2018/07/angular-6-datatable-sorting-and.html

3. Contact :- https://mdbootstrap.com/docs/angular/forms/contact/

4.Edit and Delete :-https://www.devglan.com/angular/angular-6-example

5. Switch Tabs:- https://material.angular.io/components/tabs/overview

6. Save and Cancel :- https://stackoverflow.com/questions/45015403/angular-2-form-validators-messing-with-the-cancel-button

I hope it will be helpful.

Thank you so much everyone for the answers its really helpful does anyone know if i can find exact requirment example that will be much appriciated

If you want to use bootsrap4 in angular than you should be install it first than write code in component.html like that:

"/action_page.php">
class="form-group">
for="email">Email address:
"email" class="form-control" id="email">

Hello dave,

Lookover the below angular 6 form creation and validation implemented

https://stackblitz.com/edit/angular-6-reactive-form-validation

Hi Dear,

Here is a angular 6 with bootstrap lagin form

https://jasonwatmore.com/post/2018/05/16/angular-6-user-registration-and-login-example-tutorial

Thanks

hello dear please check this article

https://www.c-sharpcorner.com/article/create-registration-and-login-page-using-angular-7-and-web-api/

6 Replies

Know the answer? Post it — somebody with the same question will find it here.

archana devi7y ago
Accepted answer
Hi Dave,

Refer the following Links
1. Login :- https://stackblitz.com/edit/angular-6-registration-login-example
2. Home page with datatable and pagination :- https://www.code-sample.com/2018/07/angular-6-datatable-sorting-and.html
3. Contact :- https://mdbootstrap.com/docs/angular/forms/contact/
4.Edit and Delete :-https://www.devglan.com/angular/angular-6-example
5. Switch Tabs:- https://material.angular.io/components/tabs/overview
6. Save and Cancel :- https://stackoverflow.com/questions/45015403/angular-2-form-validators-messing-with-the-cancel-button

I hope it will be helpful.
+1
h dave7y ago
Thank you so much everyone for the answers its really helpful does anyone know if i can find exact requirment example that will be much appriciated
0
7y ago
If you want to use bootsrap4 in angular than you should be install it first than write code in component.html like that:
"/action_page.php">
class="form-group">
for="email">Email address:
"email" class="form-control" id="email">
class="form-group">
for="pwd">Password:
"password" class="form-control" id="pwd">