when we installed npm in c drive only and tried to create ng new folder still error

ng is not recognized..... in administrator cmd prompt.

even when we instaled npm in admncmd prompt and tried to craete new folder still
error ng command not recognized.
its not working in administrator cmd prmpt .

NOTE CORRECT: IN COMMAND PROMPT FIRST INSTALL NPM THEN NAVIGATE INTO FOLDER USING
CD COMMAND ,THEN CREATE NEW PROJECT USING NG NEW PROJECTNAME.
then navigate intoyour project name using cd command , then ng serve and run local
host .
note: next day when u start work after closing everything, open visual code,goto
its terminal ,install npm then go to ur folder uding cd command,
then go to ur project name using cd command.

NOTE: if in terminal its give the error: "this command can be run in only abn cli
project", then using cd command navigate
intour project name.
note: try to keep ur folder name and project name seperate.
2. whatever u do in any component just save it.
HOW TO CREATE NEW COMPONENTS:
1.MANUALLY
2.CLI COMMAND IN TERMINAL

craeting new project;

ng new projectname// this would create a folder of projectname in c drive
then change the directory to projectname folder using cd
then type code . to open ur project.
// we do all this in cmd prompt using administrator.

creating new project

ng new proname
navigate into project

for opening: code .

NOTE:

CREATING NEW COMPONENTS:

1.MANUALLY
a.click on src go to app riht click new folder, type component name .
b.click on created component ,right click , choose new file ,give the name
"componentname.component.ts", this would create a typescript file of the respective
component.
c. In the .ts file , export classname, give a decorator for class name, inside
decorator give its selector and template (selector: name by which it would be
recognized,
template: whatever needs to be dispalyed in the component like paragraphs etc. ,
however we van also create a .html file for dispalying.)
d. Also import the decorator (@Component) , from angular/core.

2.USING CLI
a. Type ng g c componentname, it will be created.
b. delete the soec file for time being.
c. since this component was created by using cli therefore we dont need to do
anything in .ts file as we did while craeting the component manually.
d.whatever u want to dispaly in the component created write that in .html file.
NOTE: remember to save whatever u do instantly.

After creating the component either manually or using cli following steps are
necessary to be performed:
1.now since we want the two components to be below under the first,therefore go to
app.component.html
file and add the open and close tags by the name which you gave to each components
selector,
For eg:
<appwarningalert></appwarningalert>
NOTE: remember the name of tag should be same as given to selectors.(when i tried
to change one of the tags name from its selectors name , it didnt gave
any compilation error but on browser the whole screen was blank mans gave no op. )

2.Now if u created the component then it would be added to the app.module.ts file
automatically.
if u created manually then go to app.module.ts file and in NgModule componentadd
the class name of the component.
NOTE: THE NAME WT=RITTEN IN THE @NGMODULE COMPONENT SHOULD BE SAME AS THE CLASS
NAME.

note: if u want to do styling either create .cc file for the component or in the
.ts file in the decorator do the styling in styles:
syntax: style [` p{
color:red;}
`]

LEC 22: DATA BINDING (COMMUNICATION)

1.if u want to diaplay something on html template.
2.if the user clicks ,something must be triggered in the typescriptcode.
3or it can be two way also like if user clicks something,op is displayed to user.

doubt: i created a componenet called server and on browser it showed white page
until i added the html component in the
template in .ts file. in the decorator.

LEC 23: STRING INTERPOLATION:(tool for outputing data in a template.)

In .ts file whatever value you assign to th var in class,then in template write the
varname in {{ }} and when run on browser
you will get the values assigned to the variable.

NOTE: If in template instead of adding the file externally , u simply write the
code written in html file then ,
whatever changes u make in html file u will ahve to do the same in .ts file in
temlplate to observe the changes.

LEC 24.PROPERTY BINDING:

LEC 25: PROPERTY BINDING vs STRING INTERPOLATION

LEC 26:EVENT BINDING

a.By default below the button we dispalyed "no server was created!" by creating a
variable in class in .ts file and assigning it the string.
b.Then we created a fn which on being called dispalys "server was created!" in
class in .ts file.c.then in .html file in button tag we created aevent called
"clicl" to which the fn was assigned which we defined in the class in .ts file.
d.It means whenever we click the button that fn will be called n executed.
e.In .html file below button tag we use string interpolation to display the string
in the variable.

LEC28: DIDNT UNDERSTAND MUCH.

NOTE: IF YOUR PORT IS BUSY THEN TO USE A DIFFERENT PORT FOR A PROJECT TYPE "ng
serve --port1234"or type "ng serve --open --port 4201".
note:whatever component u want to dispaly on browser that should be included in
app.component.html

LEC 69:LOCAL REFERENCES

it is a feature by which we can get access to any element in our template and then
use it in the template directly not in
the ts file only in html file.
LEC 71:NG CONTENT:
If we want to give some data to our component externally that is not directly
writing in its html file but by writing in the
component.html file ,then in the component we have to add the <ng-content ></ng-
content>
directive,it tells angular that u have more component to be dispalyed from
appcomponent.html
LEC 72:COMPONENT LIFECYCLE
when a new component is created , angular goes through a lifecycle(phases) and it
gives us a chance to hok into these phases
and exdecute some code.
we can hook into these phases by implementing some methods angular will call if
they are present.
eg: ngOnChanges
ngOnInit.
LEC 63: When we want to pass data from outside that is from parent component(app-
component),
to the component then we use @Input decorator in the respective component because
we want to take input from outside.

LEC:64:EVENT EMITTER:when we want to pass data from our component to parent

component that is app-component
then we use event-emitter,and @Output.
It is used when we want to reflect the changes done in the component to the parent
component also.

LEC 67:VIEW ENCAPSULATION

Angular provides each element of every component a unique identifier so that
whatever styling is done in the css file applies to
only that component's elements only.
LEC68:REMOVING VIEW ENCAPSULATION:
We can add a property in any component named "encapsulation" and assign it thtee
values(emulated,none,native).
If we choose none ,then whatever styling we do in its css files ,it will be applied
to all the components (view encapsulation not being applied0
).
enumated and native are kind of similar depending on browser etc.

LEC: LINKING TO FIREBASE

open firebase , create a new project
select database and in database page , there is a option called "realtime database
" make sure to select that.
moreover open "rules' tab and give the access by making both values true and then
publish it.

LEC:SIGNING USERS
ERROR: auth service not found.
SOLUTION: open auth.service.ts
import { Injectable } from '@angular/core';
@Injectable()

error lec 263

FIREBASE
Its a complete backend solution .we can do almost any kind of authentication,
it also gives a real time database i.e as soon as u write a code for the data to
appear their in db ,it does gets updated, very useful in debugging.
it supports app notification ,cloud messaging.
it is useful for apps having users from 100-10000 users .
it is a mobile and web app development platform.
we dont need to manage any database api and server.
SERVICES PROVIDED BY FIREBASE
realtime database:
if we want to get and sync our data , most databases require http requests
AUTHENTICATION(proving something to be genuine and true)
TOKENS:

Routing & Navigation

The Angular Router enables navigation from one view to the next as users perform
application tasks.

NOTE:
the map imported in auth.service.ts ,if we compile after importing it there will be
compilation error ,but if we comment it out and then compile ,it compiles
successfully,
and after taht we again uncomment the import of map.

LAZY LOADING
if the user doesnt visits a part of our website then it becomes useless to load all
the code, therefore lazy loading means loading only when needed.
error:289 new recipie is not working

LEC: PRELOADING in app.routing

error is coming whose screenshot is present therefore i didnt apply the code.
LEC:304 PROGRESS
imp .how to send and get the request.

NGRX IN OUR PROJECT

STATE: It is the project seen by the user at any point of time . for eg we loaded
a recipie ,
then it is a state.or may be we edited a recipie and saved it then this is also a
state.
WHAT WE OBSERVED IN OUR PROJECT:
Whenever we refresh the app , we lose whatever editing or changes we did in our
project.
for eg if we logged in and refresh it then we r no longer loggd in.