Dotnet Blogger

ng new Projectname

ng g m Home --routing

ng g c Dashboard

ng g c login

ng g s service

ng g p Searchpipe

---------------------------------------------------------------------------------------------------

app.component.html

<router-outlet></router-outlet>

----------------------------------------------------------------------------------------------------

app.module.ts

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

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

import { AppRoutingModule } from './app-routing.module';

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

import {ReactiveFormsModule} from '@angular/forms';

import {FormsModule} from '@angular/forms';

import{HttpClientModule} from '@angular/common/http';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

AppRoutingModule,

ReactiveFormsModule,

FormsModule,

HttpClientModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

--------------------------------------------------------------------------------------------------------

app-routing.module.ts

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

import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [

{path:'',loadChildren:()=>import('./home/home.module').then(m=>m.HomeModule)},

{path:'admin',loadChildren:()=>import('./admin/admin.module').then(m=>m.AdminModule)},

{path:'staff',loadChildren:()=>import('./staff/staff.module').then(m=>m.StaffModule)},

{path:'student',loadChildren:()=>import('./student/student.module').then(m=>m.StudentModule)}

];

@NgModule({

imports: [RouterModule.forRoot(routes)],

exports: [RouterModule]

})

export class AppRoutingModule { }

Homemodule

dashboard.component.html

<span class="text-muted">Learn Today</span>

</a>

</li>

<a routerLink="login" class="nav-link text-light">Login</a>

</li>

<a routerLink="register" class="nav-link text-light">Register</a>

</li>

<a routerLink="aboutus" class="nav-link text-light">About US</a>

</li>

<a routerLink="contactus" class="nav-link text-light">Contact US</a>

</li>

</ul>

</nav>

<marquee behavior="scroll" direction="left"><b>WELCOME TO CHARAN TECHNOLOGIES</b></marquee>

<router-outlet></router-outlet>

home-routing.module.ts

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

import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from './dashboard/dashboard.component';

import {HomeComponent} from './home/home.component';

import { LoginComponent } from './login/login.component';

import { RegisterComponent } from './register/register.component';

import { AboutusComponent } from './aboutus/aboutus.component';

import { ContactusComponent } from './contactus/contactus.component';

const routes: Routes = [

{path:'home',component:DashboardComponent,children:[

{path:'home',component:HomeComponent},

{path:'login',component:LoginComponent},

{path:'register',component:RegisterComponent},

{path:'aboutus',component:AboutusComponent},

{path:'contactus',component:ContactusComponent}

]},

{path:'',redirectTo:'home',pathMatch:'full'}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class HomeRoutingModule { }

home.module.ts

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

import { CommonModule } from '@angular/common';

import {FormsModule,ReactiveFormsModule} from '@angular/forms'

import { HomeRoutingModule } from './home-routing.module';

import { DashboardComponent } from './dashboard/dashboard.component';

import {HomeComponent} from './home/home.component';

import { LoginComponent } from './login/login.component';

import { RegisterComponent } from './register/register.component';

import { AboutusComponent } from './aboutus/aboutus.component';

import { ContactusComponent } from './contactus/contactus.component';

@NgModule({

declarations: [DashboardComponent, HomeComponent, LoginComponent, RegisterComponent, AboutusComponent, ContactusComponent],

imports: [

CommonModule,

HomeRoutingModule,

FormsModule,ReactiveFormsModule

]

})

export class HomeModule { }

register.component.html

<div class="text-center"> <h2><u><i>Change Password Form</i></u></h2></div>

</div>

</div>

</div>

<option>Choose Category</option>

<option value="staff">Staff</option>

<option value="student">Student</option>

</select>

</div>

<button type="submit" class="btn btn-success" [disabled]='Regform.invalid'>Submit</button>

</div>

</form>

</div>

</body>

<p class="footer-text">© Charan Technologies</p>

</div>

Register.component.ts

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

import {FormBuilder} from '@angular/forms';

import { NoticeDataServiceService } from 'src/app/shared/notice-data-service.service';

@Component({

selector: 'app-register',

templateUrl: './register.component.html',

styleUrls: ['./register.component.css']

})

export class RegisterComponent implements OnInit {

Regform:any;

constructor(private fb:FormBuilder, private NoticeDataserv:NoticeDataServiceService) { }

ngOnInit() {

this.initRegform();

}

initRegform(){

this.Regform=this.fb.group({

UserName:[''],

Password:[''],

ID:[''],

Category:[''],

});

}

submit():void{

this.NoticeDataserv.PostReg(this.Regform.value).subscribe(data=>{

console.log(this.Regform.value);

this.Regform.reset();

})

}

Login

Login.component.html

<div class="text-center"> <h2><u><i>Login Form</i></u></h2></div>

</div>

</div>

<button type="login" class="btn btn-success">Login</button>

</div>

</form>

</div>

<p class="footer-text">© Charan Technologies</p>

</div>

</body>

Login.component.ts

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

import {NoticeDataServiceService} from 'src/app/shared/notice-data-service.service';

import {Router} from '@angular/router';

@Component({

selector: 'app-login',

templateUrl: './login.component.html',

styleUrls: ['./login.component.css']

})

export class LoginComponent implements OnInit {

constructor(private NoticeDataServ:NoticeDataServiceService, private Route:Router) { }

data:any[];

ngOnInit() {

}

this.NoticeDataServ.Postlog(obj).subscribe(data=>{

console.log(data)

if(data.msg=='success'){

localStorage.setItem('token',data.token);

}

if(data.Category=='student')

{

this.Route.navigate(['student']);

}

else if(data.Category=='staff')

{

console.log('@@@@')

this.Route.navigate(['staff'])

}

})

}

// if (obj['UserName']==['admin'] && obj['Password']==['admin']){

// this.Route.navigate(['admin']);

// }

// else if(obj['UserName']==['syam'] && obj['Password']==['syam']){

// this.Route.navigate(['staff']);

// }

// else if(obj['UserName']==['anil'] && obj['Password']==['anil']){

// this.Route.navigate(['student']);

// }

Admin

Admin.routing.modele.ts

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

import { Routes, RouterModule } from '@angular/router';

import { AddStaffComponent} from './add-staff/add-staff.component';

import { AdDashboardComponent } from './ad-dashboard/ad-dashboard.component';

import { AddStudentComponent } from './add-student/add-student.component';

import { ViewStaffComponent } from './view-staff/view-staff.component';

import { ViewStudentComponent } from './view-student/view-student.component';

import {viewContactusComponent} from './viewcontactus/viewcontactus.component';

const routes: Routes = [

{path:'',component:AdDashboardComponent,children:[

{path:'add-staff',component:AddStaffComponent},

{path:'add-student',component:AddStudentComponent},

{path:'view-staff',component:ViewStaffComponent},

{path:'view-student',component:ViewStudentComponent},

{path:'viewcontactus',component:viewContactusComponent}

]}

];

@NgModule({

imports: [RouterModule.forChild(routes)],

exports: [RouterModule]

})

export class AdminRoutingModule { }

admin.module.ts

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

import { CommonModule } from '@angular/common';

import {FormsModule,ReactiveFormsModule} from '@angular/forms'

import { AdminRoutingModule } from './admin-routing.module';

import { AddStaffComponent } from './add-staff/add-staff.component';

import { ViewStaffComponent } from './view-staff/view-staff.component';

import { ViewStudentComponent } from './view-student/view-student.component';

import { AddStudentComponent } from './add-student/add-student.component';

import { AdDashboardComponent } from './ad-dashboard/ad-dashboard.component';

import { viewContactusComponent } from './viewcontactus/viewcontactus.component';

import { SharepipePipe } from 'src/app/shared/sharepipe.pipe';

@NgModule({

declarations: [AddStaffComponent, ViewStaffComponent, ViewStudentComponent, AddStudentComponent, AdDashboardComponent, viewContactusComponent, SharepipePipe],

imports: [

CommonModule,

AdminRoutingModule,

FormsModule,

ReactiveFormsModule

]

})

export class AdminModule { }

admin.dashboard

</a>

<a routerLink="" class="nav-link text-dark"><b>Logout</b></a>

</li>

</ul>

</nav>

<a routerLink="add-staff" class="nav-link"><b><i>Add Staff</i></b></a>

</div>

<a routerLink="view-staff" class="nav-link"><b><i>View Staff</i></b></a>

</div>

<a routerLink="add-student" class="nav-link"><b><i>Add Student</i></b></a>

</div>

<a routerLink="view-student" class="nav-link"><b><i>View Student</i></b></a>

</div>

<a routerLink="viewcontactus" class="nav-link"><b><i>view Contactus</i></b></a>

</div>

<router-outlet></router-outlet>

</div>

Admin

addstaff.component.html

<h3>Please fill the form</h3>

</div>

</div>

</div>

</div>

<h5>Gender</h5>    

<input type="radio" formControlName="Gender" value="Male">Male    

<input type="radio" formControlName="Gender" value="Female">Female

</div>

</div>

</div>

</div>

<option>Choose</option>

<option value="staff">Staff</option>

</select>

</div>

<button type="submit" class="btn btn-success" [disabled]='Staffform.invalid'>Submit</button>

</div>

</form>

</div>

</div>

addstaff.component.ts

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

import {FormBuilder} from '@angular/forms';

import { NoticeDataServiceService } from 'src/app/shared/notice-data-service.service';

@Component({

selector: 'app-add-staff',

templateUrl: './add-staff.component.html',

styleUrls: ['./add-staff.component.css']

})

export class AddStaffComponent implements OnInit {

Staffform:any;

constructor(private fb:FormBuilder, private NoticeDataserv:NoticeDataServiceService) { }

ngOnInit()

{

this.initStaffform();

}

initStaffform()

{

this.Staffform=this.fb.group({

ID:[''],

Name:[''],

Designation:[''],

DOB:[''],

Gender:[''],

Email:[''],

MobileNumber:[''],

Password:[''],

Category:['']

})

}

submit():void{

this.NoticeDataserv.PostStaffData(this.Staffform.value).subscribe(data=>{

this.Staffform.reset();

})

}

Viewstaff

Viewstaff.component.html

<b>Search:<input type="text" palceholder ="Search Data" [(ngModel)]=searchTerm></b><br><br>

<tr>

</th>

</tr>

<td>{{Staff.ID}}</td>

<td>{{Staff.Name}}</td>

<td>{{Staff.Designation}}</td>

<td>{{Staff.DOB}}</td>

<td>{{Staff.Gender}}</td>

<td>{{Staff.Email}}</td>

<td>{{Staff.MobileNumber}}</td>

<td>{{Staff.Password}}</td>

<td>{{Staff.Category}}</td>

<td><button type="button" class="btn btn-success"(click)="Delete(Staff,ind)">Delete</button></td>

</tr>

</table>

</div>

Viewstaff.component.ts

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

import {NoticeDataServiceService} from 'src/app/shared/notice-data-service.service';

@Component({

selector: 'app-view-staff',

templateUrl: './view-staff.component.html',

styleUrls: ['./view-staff.component.css']

})

export class ViewStaffComponent implements OnInit {

constructor(private NoticeDataServ:NoticeDataServiceService) { }

ViewStaff:any[];

searchTerm:any;

sta:string[]=['Index','ID','Name','Designation','DOB','Gender','Email','MobileNumber','Password','Category']

ngOnInit() {

this.Getstaff();

}

Getstaff(){

this.NoticeDataServ.GetStaff().subscribe(data=>{

this.ViewStaff=data;

});

}

Delete(Staff,index):void{

this.NoticeDataServ.DelStaff(Staff).subscribe(DeltStaff=>

{

this.Getstaff();

})

}

Dataservices.services.ts

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

import{environment} from 'src/environments/environment';

import{HttpClient} from '@angular/common/http';

import { Observable } from 'rxjs';

@Injectable({

providedIn: 'root'

})

export class NoticeDataServiceService {

constructor(private http:HttpClient) { }

baseurl=environment.dataurl;

//Login

Postlog(data):Observable<any>{

let url=`${this.baseurl}/api/Admin/login`;

return this.http.post(url,data);

}

PostReg(data):Observable<any>{

let url=`${this.baseurl}/api/Admin/reg`;

return this.http.put(url,data);

}

//staff Get,post,delete

PostStaffData(data):Observable<any>{

let url=`${this.baseurl}/api/Admin/staff`;

return this.http.post(url,data);

}

GetStaff():Observable<any>{

let url=`${this.baseurl}/api/Admin/view-staff/staff`;

return this.http.get(url);

}

DelStaff(deldata):Observable<any>{

let url=`${this.baseurl}/api/Admin/Delete/${deldata.Name}`;

return this.http.delete(url);

}

Sharepipe.pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({

name: 'sharepipe'

})

export class SharepipePipe implements PipeTransform {

transform(sharepipe: any[],searchTerm:any): any {

if(searchTerm==null)

{

return sharepipe;

}

else{

return sharepipe.filter(x=>{

if(x.Name.toLowerCase().indexOf(searchTerm.toLowerCase())!==-1 ||

x.Email.toLowerCase().indexOf(searchTerm.toLowerCase())!==-1){

return x

}

else if(x.ID==searchTerm)

{

return x

}

})

}

Dotnet Blogger

Monday, 9 March 2020

Task Models

About Me

My Blog List