Holocron: Angular 8 boot up (1) ,Interpolation

Angular 8 boot up (1), Interpolation

https://github.com/jalbertomr/Angular8Bootup.git

    Let's do a fast upgrade of knowledge about the latest version of Angular.
https://angular.io/docs
The very first is install Angular 8, and we use the usefull npm (package manager of installations), the way these are installer are constantly updated, so better refer to the home page.

For this work we intent to follow the work of Mr. Vishwas, a fast and comprehensive guidance. https://www.youtube.com/watch?v=0eWrpsCLMJQ&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ

On terminal in this case inside WebStrom run the command to create de app structure.

D:\WebstormProjects\Angular>ng new Angular8-Bootup
? Would you like to add Angular routing? No
? Which stylesheet format would you like to use? (Use arrow keys)
> CSS
SCSS   [ https://sass-lang.com/documentation/syntax#scss                ]
Sass   [ https://sass-lang.com/documentation/syntax#the-indented-syntax ]
Less   [ http://lesscss.org                                             ]
Stylus [ http://stylus-lang.com                                         ]

Structure Created

D:\WebstormProjects\Angular>cd Angular8-Bootup

To start It
D:\WebstormProjects\Angular\Angular8-Bootup>ng serve -o
10% building 3/3 modules 0 activei ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
i ｢wds｣: webpack output is served from /
i ｢wds｣: 404s will fallback to //index.html

or

D:\WebstormProjects\Angular\Angular8-Bootup>npm start

And Display the predefined app

app.component.ts

Index.html

create a new component called "miComponente"

D:\WebstormProjects\Angular\Angular8-Bootup>ng g c miComponente
CREATE src/app/mi-componente/mi-componente.component.html (28 bytes)
CREATE src/app/mi-componente/mi-componente.component.spec.ts (671 bytes)
CREATE src/app/mi-componente/mi-componente.component.ts (296 bytes)
CREATE src/app/mi-componente/mi-componente.component.css (0 bytes)
UPDATE src/app/app.module.ts (422 bytes)

D:\WebstormProjects\Angular\Angular8-Bootup>

look at "miComponente" structure. the component recently created.

ts - The typeSrcipt of the component

html - part of the component.

index.html of the app.

Modify the app.component.html to add mi-componente, with selector <app-mi-componente>, and remove the half down part of the original html, just to clean a little the screen.

We rerun, we get the new aspect with mi-componente integrated.

For demostrative purpouses we modify the metadata of the component to modify in the same file the
template (html) and style (css) of the component. generally they are pointed to the html and css files of the component.

The component can be inserted used as:

   - html custom tag.
   - class.
   - attribute.

Used as html custom tag