Angular 6 Routing

Routing in Angular


https://www.youtube.com/watch?v=-Rtf6G7u4-4&t=1s


Today i will tell you how to Create Link in Angular .

to Create a link you need a app-routing.module.ts
in this module we define link /routes .


Frist we will Create Some Link on our Home Page Component

app.component.html

Home


Employee

The tells the router where to display routed views.

Now our HTML page in created in which two link will be there
on clicking these link you will be redirected on another page .
this is done through routing .

Routing outlet is used for routing .


we have create component

C:\MyAngular\myapp> ng g c home
CREATE src/app/home/home.component.html (19 bytes)
CREATE src/app/home/home.component.spec.ts (614 bytes)
CREATE src/app/home/home.component.ts (261 bytes)
CREATE src/app/home/home.component.css (0 bytes)
UPDATE src/app/app.module.ts (553 bytes)

C:\MyAngular\myapp> ng g c emp
CREATE src/app/emp/emp.component.html (18 bytes)
CREATE src/app/emp/emp.component.spec.ts (607 bytes)
CREATE src/app/emp/emp.component.ts (257 bytes)
CREATE src/app/emp/emp.component.css (0 bytes)
UPDATE src/app/app.module.ts (623 bytes)

see in both case app.module.ts is updated .

in app.module.ts routing module is already added in import section

by default import { AppRoutingModule } from './app-routing.module'; is added in app.module.ts


app-routing.module.ts
--------------------------------

const routes: Routes = [
{ path:'',component : HomeComponent } ,
{ path:'employee',component : EmplistComponent }

];
path: a string that matches the URL in the browser address bar.
component: the component that the router should create when navigating to this route.

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

Angular 6 Project Structure

Learn the Project Structure of Angular 6

Shubh Techno Expert

https://www.youtube.com/watch?v=povG03z340E

you will able to understand the Project Structure .

Project Architecture

app-routing.module.ts

This Module is used to define Routing

app.component.html

This HTML file is used for UI and HTML designing

app.component.spec.ts

This file is used for Unit Testing .

app.component.ts

This is typescript File where you can write your script .

app.module.ts

This is the Module where you can import and define modules.

Index.html

This is the Startup file

angular.json

Here you can set your Botstrap css file and script files

Src Folder

   This Folder Contains all your Files

.editorconfig

This is the Configration File of Project

Angular 6 Tutorials

Angular is a JavaScript open-source front-end web application framework. 

Learn and Start Angular 6 


https://youtu.be/iCczsazLY-E

Prerequisites

1. Node.js

2. npm package manager

3.Install the Angular CLI

open command Prompt and Install 

c: \ > npm install -g @angular/cli

Add Enum in Array List

System.Collections.ArrayList Al = new System.Collections.ArrayList();                      

Al.AddRange(Enum.GetNames(typeof(SqlDbType)));

Save data Through XML

PAN No Validation

I have validated a text box that only PAN NO should be enter in that text box
It should be of 10 character first 5 digit will be Alphabet next 4 digit will be number and next one is alphabet
here txtPAN(TextBox) length should be fixed 10 chracter
ex : BJJPA4563A

 private void txtPAN_KeyPress(object sender, KeyPressEventArgs e)
        {
            ValidatePANNO(e);
        }

   void ValidatePANNO(KeyPressEventArgs e)
        {
            if (!char.IsLetterOrDigit(e.KeyChar) && e.KeyChar != 8)
            {
                e.Handled = true;
                return;
            }

            if (e.KeyChar == 8)
            {
                return;
            }
            int len = txtPAN.TextLength;
            if (len < 5)
            {
                if (char.IsLetter(e.KeyChar))
                {

                }
                else
                {
                    e.Handled = true;
                }

            }
            else
            {
                if (len == 9)
                {
                    if (char.IsLetter(e.KeyChar))
                    {
                        return;
                    }
                }
                if (char.IsLetter(e.KeyChar))
                {
                    e.Handled = true;
                }
                else
                {
                    if (len == 9)
                    {
                        if (!char.IsLetter(e.KeyChar))
                        {
                            e.Handled = true;
                        }
                    }
                }
            }
        }

How To delete Collection From Context in Entity Framework 4.0

To Delete All Object by using Entity Framework 4.0

To Delete All OrderDetails of Customer Object where OrderID=103

 var x = customerContext.OrderDetails.Where(c => c.OrderID == 103);
 customerContext.DeleteAll(x.ToList());
 customerContext.SaveChanges();

you have to defile DeleteAll method in a static class

namespace Application.Global
{

public static class GlobalMethods

    {

      public static void DeleteAll(this ObjectContext context, IEnumerable records)

       {

           foreach (T record in records)

           {

               context.DeleteObject(record);

           }

       }

    }

}