Angular 13

Install Latest NodeJs & VS Code

https://nodejs.org/en/
https://code.visualstudio.com/download

Install Angular

npm install -g @angular/cli

Create New App

ng new my-app --strict false

cd my-app
code .

Run New App on the VS code terminal using

ng serve

Notes:

if you got the next error 

open the Power Shell and run the next command

1. set-ExecutionPolicy RemoteSigned -Scope CurrentUser 

"ng server" command should run the app on the default URL http://localhost:4200

Add the next extensions to the visual studio code to improve the development process

1. Angular Language Service
2. Angular Snippets
3. Bracket Pair Colorization Toggler

Structure of New Project

1) Index.html: start page 
2) main.ts: entry point to the angular, contains definition to the start module
3) Module: contains definitions for the components
4) Component: part of the page and consists of 3 main items [Tag Selector, Template, CSS]

Because Application can contains many components. also, the main component can contains child components, we can add new component using

ng generate component mycomponents/comp1

Create "header" component 

ng generate component my_components\header

this command will create child component, and register this component inside "app.module.ts".

to use the new component, just create tag with component selector, in our case the selector is

<app-header></app-header> 

Component tag can send some parameters to the component like this

<app-header color="#336699" text="Rafie"></app-header>

to receive the send values inside angular component, we need to import Input and define them inside OnInit{} by @Input() variableName = DefaultValue;

to send data from angular component to HTML use {{Variable Name}}

Dependency Injection 

To make a module available on every component constructor, define this component in "app.modules.ts" on import section.

here is example about how to add HttpClientModule

and to receive this inside component, use constructor

we should not make http requests inside constructor and the best place on "ngOnInit()"

to allow it,  implement OnInit  inside class definition, like this

Sample of how to get users data from https://jsonplaceholder.typicode.com/users,
and view it inside HTML template and loop through it using *ngFor 

to add bootStrap 5 to the project 

ng add ngx-bootstrap

How to work with GrandNode2 and CURD to Mongo

 Sample Select

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

//Get Connection String var connection = DataSettingsManager.LoadSettings(); //Connect to database and get table referance IRepository<Domain.Catalog.Product> _productRepository = new Domain.Data.Mongo.MongoRepository<Domain.Catalog.Product>(connection.ConnectionString); List<string> AllBundleProductsIds = new System.Collections.Generic.List<string>(); //select from DB table var ProductDetails = _productRepository.Table.FirstOrDefault(x => x.Id == "62016cb9a84d6af2be24d0cc"); if (ProductDetails != null && ProductDetails.BundleProducts.Any()) { foreach (var item in ProductDetails.BundleProducts) { AllBundleProductsIds.Add(item.ProductId); } }

Insert New Record

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

//Get Connection String var connection = DataSettingsManager.LoadSettings(); //Connect to database and get table referance IRepository<Picture> _pictureRepository = new MongoRepository<Picture>(connection.ConnectionString); var picture = new Grand.Domain.Media.Picture { PictureBinary = File.ReadAllBytes("c:\\images\\logo.jpg"), MimeType = "image/jpeg", SeoFilename = "", AltAttribute = "", TitleAttribute = "", Reference = 0, ObjectId = "", IsNew = true, }; _pictureRepository.Insert(picture);

Available Mongo-Linq commands

https://mongodb.github.io/mongo-csharp-driver/1.11/linq/

https://zetcode.com/csharp/mongodb/

 

.Net project can't run on local machine when debug on Chrome

 Why ? Chrome Automatic Redirect http to https!!

If you ever visited the https version of a website (whether it resolved or not), Google Chrome might repeatedly send you to that version. In other words, http://localhost:4000 continually redirects you to https://localhost:4000

Solution

In a new browser tab, go to chrome://net-internals/#hsts

Scroll down to "Delete domain security policies" and enter the root domain that's causing you issues. For example, I entered localhost to prevent the domain from automatically redirecting to https.

Then, click the Delete button.