demo project:Student information system
Project Directory:
src/Assets,
src/App,
home component,
mat-confirm component,
App component.html
App module.ts
App routing module.ts
shared/dialog.service
Student Module
registration(css,html,ts),
update(css,html,ts),
sidebar(css,html,ts)
studentlist(css,html,ts)
mat confirm(css,html,ts)
student routing module
studentlist service.ts
homecomponent.html
<div class="container">
<div class="card shadow p-3 mb-5 bg-white rounded" style="width: 28rem; height:28rem;">
<h2>Login</h2>
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label> First Name</label>
<input type="text" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
<div *ngIf="f.firstName.errors.required">First Name is required</div>
<div *ngIf="f.firstName.errors.pattern">Invalid name</div>
</div>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" formControlName="password" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.password.errors }" />
<div *ngIf="submitted && f.password.errors" class="invalid-feedback">
<div *ngIf="f.password.errors.required">Password is required</div>
<div *ngIf="f.password.errors.minlength">Password must be at least 6 characters</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<div class="card2" style="width:26rem;height:7rem; background:#9e9c98">
<p>Notes:</p>
<p>Credentials username:Abhishek ,Password:123456</p>
<p>All data will restored when refreshed</p>
</div>
</div>
</div>
homecomponent.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router} from '@angular/router';
import { ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder, private router: Router,private toastr:ToastrService) { }
public logDetail=[];
ngOnInit(): void {
this.loginForm = this.formBuilder.group({
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z\s]+$')]],
password: ['', [Validators.required, Validators.minLength(6)]]
});
//this.logDetail=this._logservice.getDetail();
}
get f() { return this.loginForm.controls; }
onSubmit() {
this.submitted = true;
if (this.loginForm.invalid) {
return;
}
var firstName = this.f.firstName.value;
var password =this.f.password.value;
console.log(firstName)
console.log(password)
if (firstName == "Abhishek" && password == "123456") {
console.log("login sucessfull")
this.router.navigate(['/studentlist']);
}
else{
this.toastr.error("Invalid Login");
}
}
}
/*
this.submitted = true;
let formValue = JSON.parse(localStorage.getItem('form-data')!);
let f=this.loginForm.value;
console.log(f);
console.log(formValue);
let pW=null;
//stop here if form is invalid
if (this.loginForm.invalid) {
return;
}
/*
else{
if(formValue==f.value) {
console.log("login succeed")
}
else{
console.log("login failed")
}
}
//alert('SUCCESS!! :-)')
//localStorage.setItem('form-data', JSON.stringify(this.loginForm.value));
}
else{
if(formValue==f.value) {
console.log("login succeed")
}
else{
console.log("login failed")
}
}
//alert('SUCCESS!! :-)')
//localStorage.setItem('form-data', JSON.stringify(this.loginForm.value));
*/
homecomponent.css
h2{
text-align:center;
color:orange;
}
.card{
margin-top: 50px;
margin-left:30%;
}
.form-group{
padding-top: 10px;
padding-left:10px;
padding-right: 10px;
color:#00ccff;
font-weight: bold;
}
.btn{
margin-left:10px;
}
.card2{
margin-top:15px;
}
p{
margin-left:10px;
color:white;
font-size: 15px;
}
matconfirmdialog.html
<div>
<div class="content-container">
<mat-icon id="close-icon" (click)="closeDialog()">close</mat-icon>
<span class="content-span full-width">{{ data.message }}</span>
</div>
<button mat-flat-button id="no-button"[mat-dialog-close]="false">No</button>
<button mat-flat-button id="yes-button" [mat-dialog-close]="true">Yes</button>
</div>
matconfirmdialog.ts
import { Component, OnInit , Inject } from '@angular/core';
import {MAT_DIALOG_DATA,MatDialogRef} from '@angular/material/dialog';
@Component({
selector: 'app-mat-confirm-dialog',
templateUrl: './mat-confirm-dialog.component.html',
styleUrls: ['./mat-confirm-dialog.component.css']
})
export class MatConfirmDialogComponent implements OnInit {
constructor(@Inject(MAT_DIALOG_DATA) public data: {message: string},public dialogRef:MatDialogRef<MatConfirmDialogComponent> ) { }
ngOnInit(): void {
}
closeDialog(){
this.dialogRef.close();
}
}
shared/dialog.service
import { Injectable } from '@angular/core';
import {MatDialog} from '@angular/material/dialog';
import { MatConfirmDialogComponent } from '../mat-confirm-dialog/mat-confirm-dialog.component';
import { MatconfirmComponent } from '../student/matconfirm/matconfirm.component';
@Injectable({
providedIn: 'root'
})
export class DialogService {
constructor(private dialog:MatDialog) { }
openConfirmDialog(msg:any){
return this.dialog.open(MatConfirmDialogComponent,{
width:'390px',
panelClass:'confirm-dialog-container',
disableClose:true,
data:{
message:msg
}
})
}
openDialog(){
return this.dialog.open(MatconfirmComponent,{
width:'390px',
panelClass:'confirm-dialog-container',
disableClose:true,
})
console.log("new dialog")
}
}
student/registration.html
<app-sidebar></app-sidebar>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<span><h2> Registration</h2></span>
<span> <button class="btn btn-primary" (click)="doTheBack()" >back</button></span>
</div>
</div>
<form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>First Name</label>
<input type="text" id="firsName" formControlName="firstName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.firstName.errors }" />
<div *ngIf="submitted && f.firstName.errors" class="invalid-feedback">
<div *ngIf="f.firstName.errors.required">First Name is required</div>
<div *ngIf="f.firstName.errors.pattern">Invalid name</div>
</div>
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" #lastName formControlName="lastName" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.lastName.errors }" />
<div *ngIf="submitted && f.lastName.errors" class="invalid-feedback">
<div *ngIf="f.lastName.errors.required">First Name is required</div>
<div *ngIf="f.lastName.errors.pattern">Invalid name</div>
</div>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" #email formControlName="email" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.email.errors }" />
<div *ngIf="submitted && f.email.errors" class="invalid-feedback">
<div *ngIf="f.email.errors.required">Email is required</div>
<div *ngIf="f.email.errors.email">Email must be a valid email address</div>
</div>
</div>
<div class="form-group">
<label>Phone Number</label>
<input type="text" #phone formControlName="phone" class="form-control" [ngClass]="{ 'is-invalid': submitted && f.phone.errors }" />
<div *ngIf="submitted && f.phone.errors" class="invalid-feedback">
<div *ngIf="f.phone.errors.required">Phone number is required</div>
<div *ngIf="f.phone.errors.minlength">phone must be at least 10 characters</div>
</div>
</div>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
student/registration.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { StudentlistService } from 'src/app/studentlist.service';
@Component({
selector: 'app-registration',
templateUrl: './registration.component.html',
styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
registrationForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder,private studentservice:StudentlistService,private toastr:ToastrService) { }
ngOnInit(): void {
this.registrationForm = this.formBuilder.group({
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z\s]+$')]],
lastName: ['', [Validators.required,Validators.pattern('^[a-zA-Z\s]+$')]],
email: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, Validators.minLength(10)]]
});
}
get f() { return this.registrationForm.controls; }
onSubmit() {
this.submitted = true;
if (this.registrationForm.invalid) {
return;
}
console.log("after if")
var tbClients = [] as any
var selected_index = -1;
tbClients = localStorage.getItem("tbClients");
tbClients = JSON.parse(tbClients!);
if(tbClients == null)
tbClients = [] as any;
var client = JSON.stringify({
firstName : this.f.firstName.value,
lastName :this.f.lastName.value ,
email :this.f.email.value ,
phone : this.f.phone.value,
});
tbClients.push(client);
localStorage.setItem("tbClients",JSON.stringify(tbClients));
this.studentservice.AddData(this.f);
this.toastr.success("Registered Successfully !");
return true;
}
doTheBack(){
window.history.back();
}
}
/*
this.submitted = true;
let f=this.registrationForm.value;
console.log(f);
console.log("submited")
// stop here if form is invalid
if (this.registrationForm.invalid) {
return;
}
alert('SUCCESS!! :-)')
localStorage.setItem('form-data', JSON.stringify(this.registrationForm.value));
}
let f=this.registrationForm.value;
let x =[];
x= f;
console.log(x[0])
----global function----
function s() {
var selected_index = -1;
var tbClients = localStorage.getItem("tbClients");
tbClients = JSON.parse(tbClients!);
if(tbClients == null)
tbClients = [] as any;
}
(window as any).s = s;
*/
student/registration.css
h2{
margin-left: 100px;
}
.form-group{
margin-top:20px;
margin-left: 100px;
color:#00ccff;
font-weight: bold;
}
button{
margin-left: 100px;
}
.panel{
background-color: #3FBFBF;
margin-left: 100px;
margin-top: 10px;
height:40px;
}
span h2{
color: white;
margin-top:10px;
padding-top:5px;
margin-left:10px;
font-size: 25px;
}
span button{
float:right;
background-color: #3FBF3F;
margin-top:-47px;
margin-right:10px;
font-size:10px;
}
.invalid-feedback{
font-size:10px;
}
student/update.html
same as register.html
student/update.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { StudentlistService } from 'src/app/studentlist.service';
import {Router } from '@angular/router'
@Component({
selector: 'app-update',
templateUrl: './update.component.html',
styleUrls: ['./update.component.css']
})
export class UpdateComponent implements OnInit {
data =[] as any;
studentList =[] as any;
id:number;
fName:string;
lName:string;
email:string;
phone:string;
updateForm: FormGroup;
submitted = false;
constructor(private formBuilder: FormBuilder,private studentLists :StudentlistService,private route:ActivatedRoute,private router:Router,private studentservice:StudentlistService) { }
ngOnInit(): void {
this.studentservice.getData()
.subscribe(studentData=>{
this.studentList=studentData;
console.warn(this.studentList)
this.fName=this.studentList[id-1].first_name;
this.lName=this.studentList[id-1].last_name;
this.email=this.studentList[id-1].email;
this.phone=this.studentList[id-1].phone_number;
});
let id = parseInt(this.route.snapshot.paramMap.get('id')!);
this.updateForm = this.formBuilder.group({
firstName: ['', [Validators.required,Validators.pattern('^[a-zA-Z\s]+$')]],
lastName: ['', [Validators.required,Validators.pattern('^[a-zA-Z\s]+$')]],
email: ['', [Validators.required, Validators.email]],
phone: ['', [Validators.required, Validators.minLength(10)]]
});
}
get f() { return this.updateForm.controls; }
onSubmit() {
this.submitted = true;
let studentList:any;
// if (this.updateForm.invalid) {
// return;
// }
this.router.navigate(['/studentlist']);
console.log(this.data.first_name)
}
}
student/update.css
same as register.css
student/sidebar.html
<div class="container-fluid">
<div class="row">
<aside class="col-2 px-0 fixed-top h-100" >
<div class="card shadow p-3 mb-5 bg-white">
<h2>Stuinfo</h2>
<a [routerLink]="['/studentlist']">User List</a>
<a [routerLink]="['/registration']">Add new User</a>
<a [routerLink]="['/login']">Logout</a>
<router-outlet></router-outlet>
</div>
</aside>
</div>
</div>
student/sidebar.css
.card{
height:100%;
}
h2{
text-align: center;
margin-top:40px;
color:orange;
}
a{
font-size: 15px;
margin-top:10px;
}
.card a:hover {
margin-left:-15px;
background-color:#3FBFBF;
border-radius: 5px;
padding: 5px;
}
student/matconfirm.html
<div *ngIf="visible">
<div class="card" id="card">
<div class="card-body">
<button id="btn1" (click)="closeButton()"> x </button>
<p class="card-text">Are you sure to Delete this entry ? </p>
<button id="btn2" (click)="deleteButton($event)" >Yes</button>
<button id="btn3" (click)="closeButton()">No</button>
</div>
</div>
</div>
student/matconfirm.ts
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { StudentlistService } from 'src/app/studentlist.service';
@Component({
selector: 'app-matconfirm',
templateUrl: './matconfirm.component.html',
styleUrls: ['./matconfirm.component.css']
})
export class MatconfirmComponent implements OnInit {
@Input() index:any;
@Output() onDel =new EventEmitter();
visible=false;
x:any =false;
data:any;
constructor (private studentLists :StudentlistService ) { }
ngOnInit(): void {
this.data=this.studentLists.getEmployee()
.subscribe(data => this.data =data );
}
closeButton(){
this.visible=false;
}
deleteButton(e:any){
// console.log(this.index)
// this.data.splice(this.index,1);
// return this.data
this.onDel.emit(e);
}
}
student/matconfirm.css
.card{
margin-left:300px;
margin-top: -300px;
width:300px;
height:100px;
}
#btn1{
float:right;
font-size:15px;
height:22px;
width:20px;
margin-top:-15px;
margin-right:-15px;
background-color:red;
color: white;
}
#btn2{
width:100px;
background-color: red;
color:white;
}
#btn3{
width:100px;
background-color: green;
color:white;
}
student/studentlist.css
table,th,td{
width:1000px;
border: none;
padding:6px;
}
th{
margin-left: 40px;
margin-top:-20px;
}
td{
margin-left: 10px;
}
tr{
border-bottom: 0.2px solid #dbd7d7;
margin-left:100px;
}
.panel{
background-color: #3FBFBF;
margin-left: 100px;
margin-top: 10px;
height:40px;
}
.material-icons {
font-size: 22px;
margin-top: 5px;
margin-left: auto;
padding-right:-50px;
}
span h2{
color: white;
margin-top:10px;
padding-top:5px;
margin-left:10px;
font-size: 25px;
}
span button{
float:right;
background-color: #3FBF3F;
margin-top:-47px;
margin-right:10px;
font-size:10px;
}
.data{
margin-left:100px;
margin-top:20px;
}
button{
font-size:10px;
}
.delete{
background-color: red;
margin-left:10px;
}
.card{
border-radius: 10px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
label{
margin-top:-30px;
font-size:20px;
}
input{
margin-top:10px;
}
student/studentlist.html
<app-sidebar></app-sidebar>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<span><h2> Student List</h2></span>
<span> <button (click)="doTheBack()" class="btn btn-primary">back</button></span>
</div>
</div>
<div class="data">
<div>
<label>
search :
</label>
<input type="text" [(ngModel)]="searchValue" />
</div>
<br>
<div class="card " style="width: 1000px; height: 420px; background:#edeff2">
<table id="table">
<tr class="ro">
<th>Sr. No.</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Phone</th>
<th>Operations</th>
</tr>
<tr *ngFor="let item of data | filter:searchValue;index as i ">
<td> {{ i+1 }} </td>
<td> {{ item.first_name }} </td>
<td> {{ item.last_name }} </td>
<td> {{ item.email }} </td>
<td> {{ item.phone_number }} </td>
<td><button class="btn btn-primary" (click)="onUpdate(i)" >Update</button> <button class="btn btn-primary delete" (click)="onDelete(i)" >Delete</button></td>
</tr>
</table>
</div>
</div>
<app-matconfirm [index]="index" (onDel)="del($event)" ></app-matconfirm>
<!--
<tr *ngFor="let student of studentListData">
<td> {{ student.firstName }} </td>
<td> {{ student.lastName }} </td>
<td> {{ student.email }} </td>
<td> {{ student.phone }} </td>
<app-mat-confirm-dialog></app-mat-confirm-dialog>
-->
student/studentlist.ts
import { AfterViewInit, Component,OnInit, ViewChild } from '@angular/core';
import { StudentlistService } from 'src/app/studentlist.service';
import {MatSnackBarModule} from '@angular/material/snack-bar';
import { LocaldataService } from 'src/app/localdata.service';
import { Router} from '@angular/router';
import {MatIconModule} from '@angular/material/icon';
import { DialogService } from 'src/app/shared/dialog.service';
import { MatDialog, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
import { ToastrService } from 'ngx-toastr';
import { MatConfirmDialogComponent } from 'src/app/mat-confirm-dialog/mat-confirm-dialog.component';
import { MatconfirmComponent } from '../matconfirm/matconfirm.component';
import { Student } from 'src/app/student';
import {Ng2SearchPipeModule} from 'ng2-search-filter'
@Component({
selector: 'app-studentlist',
templateUrl: './studentlist.component.html',
styleUrls: ['./studentlist.component.css']
})
export class StudentlistComponent implements OnInit,AfterViewInit {
@ViewChild(MatconfirmComponent) tourScreen:MatconfirmComponent;
studentList:any;
studentListData:any;
searchValue:string;
students:Student[];
data =[] as any;
val =[] as any;
tableData:any;
index:any;
newD:any;
constructor(private studentLists :StudentlistService,private router: Router,private studentService :LocaldataService,private dialogservice:DialogService,private toastr:ToastrService,public dialog:MatDialog) { }
ngOnInit(): void {
this.data=this.studentLists.getEmployee()
.subscribe(data => this.data =data );
console.log(this.data)
}
ngAfterViewInit(){
//this.newD =this.tourScreen.deleteButton(e).data
//console.log(this.newD)
}
doTheBack(){
window.history.back();
}
onDelete(item:any){
this.tourScreen.visible=true;
this.index=item;
// console.log(this.val)
// if(this.val=true){
// this.data.splice(item,1);
// this.toastr.error("Deleted Entry Successfully !");
// }
}
del(e:any){
this.data.splice(this.index,1);
this.tourScreen.visible=false;
this.toastr.error("Deleted Entry Successfully !")
}
onUpdate(item:any){
this.router.navigate(['/update',this.data[item].id]);
console.log("hello")
}
}
/*
this.dialogservice.openConfirmDialog( 'Are you sure to delete this entry ?')
MatDialogRef.afterClosed().subscribe(res =>{
if(res){
})
this.dialog.open(MatconfirmComponent);
----------without ViewChild-------------
onDelete(item:any){
this.dialogservice.openConfirmDialog('Are you sure to delete this record ?')
.afterClosed().subscribe(res =>{
if(res){
this.data.splice(item,1);
this.toastr.error("Deleted Entry Successfully !");
}
});
}
*/
student routing module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import{RegistrationComponent} from './registration/registration.component';
import {LoginComponent} from '../login/login.component';
import {StudentlistComponent} from './studentlist/studentlist.component'
import {UpdateComponent} from './update/update.component'
import { TestComponent } from './test/test.component';
const routes: Routes = [
{path:'login',component:LoginComponent},
{path:'registration',component:RegistrationComponent},
{path:'studentlist',component:StudentlistComponent},
{path:'update/:id',component:UpdateComponent},
{path:'test',component:TestComponent},
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class StudentRoutingModule { }
student module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { StudentRoutingModule } from './student-routing.module';
import { RegistrationComponent } from './registration/registration.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import {ReactiveFormsModule} from '@angular/forms';
import { StudentlistComponent } from './studentlist/studentlist.component';
import { UpdateComponent } from './update/update.component';
import { StudentlistService } from '../studentlist.service';
import { TestComponent } from './test/test.component';
import {MatIconModule} from '@angular/material/icon';
import { MatconfirmComponent } from './matconfirm/matconfirm.component';
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import {Ng2SearchPipeModule} from 'ng2-search-filter'
import {FormsModule} from '@angular/forms'
@NgModule({
declarations: [RegistrationComponent, SidebarComponent, StudentlistComponent, UpdateComponent, TestComponent, MatconfirmComponent],
imports: [
CommonModule,
StudentRoutingModule,
ReactiveFormsModule,
MatIconModule,
MatDialogModule,
Ng2SearchPipeModule,
FormsModule
],
exports:[
RegistrationComponent,
SidebarComponent,
UpdateComponent,
StudentlistComponent,
TestComponent
],
providers: [
{ provide: MAT_DIALOG_DATA, useValue: {} },
{ provide : MatDialogRef, useValue: {} }
]
})
export class StudentModule { }
app routing module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {HomeComponent} from './home/home.component';
import {LoginComponent} from './login/login.component';
import {PagenotfoundComponent} from './pagenotfound/pagenotfound.component';
import {Comp2Component} from './comp2/comp2.component'
const routes: Routes = [
{path:'',component:LoginComponent},
{path:'login',component:LoginComponent},
{path:'comp',component:Comp2Component}
// {path:'**',component:PagenotfoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
app component html
<router-outlet></router-outlet>
app module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import {StudentModule} from './student/student.module';
import {FormsModule} from '@angular/forms';
import {ReactiveFormsModule} from '@angular/forms';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
import {StudentRoutingModule} from './student/student-routing.module';
import {AuthModule} from './auth/auth.module'
import {ToastrModule} from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import {StudentlistService} from './studentlist.service'
import {MatIconModule} from '@angular/material/icon';
import {LocaldataService} from './localdata.service';
import { MatConfirmDialogComponent } from './mat-confirm-dialog/mat-confirm-dialog.component'
import { DialogService } from './shared/dialog.service';
import {MatDialogModule} from '@angular/material/dialog';
import { MatconfirmComponent } from './student/matconfirm/matconfirm.component';
import { SearchfilterPipe } from './searchfilter.pipe';
import {Ng2SearchPipeModule} from 'ng2-search-filter';
import { Comp1Component } from './comp1/comp1.component';
import { Comp2Component } from './comp2/comp2.component'
@NgModule({
declarations: [
AppComponent,
HomeComponent,
LoginComponent,
PagenotfoundComponent,
MatConfirmDialogComponent,
SearchfilterPipe,
Comp1Component,
Comp2Component,
],
imports: [
BrowserModule,
AppRoutingModule,
NgbModule,
MatIconModule,
MatDialogModule,
HttpClientModule,
StudentModule,
FormsModule,
ReactiveFormsModule,
StudentRoutingModule,
AuthModule,
ToastrModule.forRoot(),
BrowserAnimationsModule,
Ng2SearchPipeModule
],
providers: [StudentlistService,LocaldataService,DialogService,SearchfilterPipe],
bootstrap: [AppComponent],
entryComponents:[MatConfirmDialogComponent,MatconfirmComponent ]
})
export class AppModule { }
styles.css
/* You can add global styles to this file, and also import other style files */
@import "~bootstrap/dist/css/bootstrap.css";
html, body { height: 100%; }
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
*{
margin:0px;
padding:0px;
}
.btn-dialog-close{
width: 45px;
min-width: 0px !important;
height: 40px;
padding: 0px !important;
}
.confirm-dialog-container .mat-dialog-container {
border-radius: .25em .25em .4em .4em;
padding: 0px;
}
.confirm-dialog-container .content-container{
margin: 5px 5px 15px 5px;
color: #8f9cb5;
display: flex;
}
.confirm-dialog-container #close-icon{
margin-left: auto;
order: 2;
font-weight: bolder;
}
.confirm-dialog-container #close-icon:hover{
cursor: pointer;
}
.confirm-dialog-container #no-button{
height: 50px;
width: 50%;
background-color: #fc7169;
color:white;
border-radius: 0px;
}
.confirm-dialog-container #yes-button{
height: 50px;
width: 50%;
background-color: #b6bece;
color:white;
border-radius: 0px;
}
.confirm-dialog-container span.content-span{
padding: 35px 16px;
text-align: center;
font-size: 20px;
}
studentlist service
import { HttpClient, HttpErrorResponse } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { map, catchError } from "rxjs/operators";
@Injectable({
providedIn: 'root'
})
export class StudentlistService {
private _url:string ="/assets/data.json";
studentData=[]as any;
constructor(private http: HttpClient) { }
getEmployee(): Observable<any>{
return this.http.get(this._url);
}
AddData(f:any){
this.studentData.push({
first_name : f.firstName.value,
last_name :f.lastName.value ,
email :f.email.value,
phone : f.phone.value,
})
console.log("Registration form")
console.log(this.studentData)
return this.studentData
}
getData(): Observable<any>{
this.studentData= this.http.get(this._url);
console.warn("hii")
return this.studentData
console.warn("hello")
}
}
/*
for (var i = 0; i < myArray.length; i++) {
console.log(typeof i, myArray[i]);
}
.map((res: Response) => res)
.catch((e) => {
return Observable.throw(this.catchError(e)) //return Observable.throw(new Error(`${ e.status } ${ e.statusText }`))
})
//this.http.get(this._url);
catchError(error: HttpErrorResponse){
console.log('check for error 1 ', error);
}
getData(){
var tbClients=[] as any;
tbClients = localStorage.getItem("tbClients");
for(var i=0;i<tbClients.length;i++){
var cli = JSON.parse(tbClients[i]);
var firstName=cli.firstName;
var lastName=cli.lastName;
var email =cli.email;
var phone = cli.phone;
}
}
-------------------------------
*/
Comments
Post a Comment