login authentication Using Angular, Node js, Express And SQL PART 2 Front-End

angular CLI used to create module, component, service, guards, pipe, directives through the command line

ng generate components - options
used options are
-t - inline template
-s - inline-style
-skipTests=true to avoid test file generation
-d - dry run used to see the changes without creating the files

ng generate module --options

used options are

-routing=true create module along with router module

ng generate service --service name
ng generate guard --guard name
I created four-module auth, NOAuth, shared, service

no auth module holds pages which don't required authentication like login, register, forgot password

auth module holds pages which required authentication like the dashboard, pages which come after login

the shared module contains a component which used commonly between auth&noauth module

service module contains handle all API calls, data flows

initial I created the header, input components in shared modules

input component creation
input components have @Input decorator, which used to get data from the component
attributes
E.g app-input type='text' to get the type attribute value in input component class we
have used input decorator
like @Input () type: string;

inorder to pass the value from parent component to child component we have to bind tha value to child component attribute using square bracket
E.g login component holds formcontrol object . to access the form controlvobject in input component

form controller is property of parent component class, which can access in the child component

layout creation
Multiple pages have same page style mean we can use layout pattern
"ng-content" used in the layout template
ng-content used to render the components which in between their tags

authGuard
Auth guard used to provide the authentication to routes ,

Routing
Auth & Noauth modules handle their routes themself.

in Approuting is handle application routings, when auth is requested in browser url, it will lazy load the auth module,

routes in auth module are active when auth module is lazily loaded

like wise noauth modules also

Build
ng build --prod
In angular json file, you have to specify path where the build files have to place.
for current project i specified the backend's public folder which has created in Part One video

[decodingcode]

0:30 adding bootstrap & toast style
1:00 creating auth, no auth module withroutes, shared, service module

1:20 creating header & input components in shared module
3:48 no authlayout creation
4:50 login page component creation
6:52 login reactive form implementation in login class
8:20 register page component creation
9:13 adding register component in no auth module router

10:05 adding login, register, profile method to call api in auth service
13:01 calling service method inside the login & register components

14:34 creating auth guard for auth modules routes
15:37 creating auth layout & dashboard component
15:58 adding dashboard component to auth module route &
Adding dashboard module to app-routing for dashboard path
16:36 set path for build path, and take a build

[preetimadgul]

Which angular version u can use in this login registration page

[jesusmontes]

3:55 please help -> Can't bind to 'formGroup' since it isn't a known property of 'div' -Can't bind to 'formControlName' since it isn't a known property of 'input'.

[azula]

Hey I have a question about implementing this to a website

[ayush]

@Decoder Do you have GitHub repo for this