https://github.com/enginooby-practice/angular

https://github.com/enginooby-practice/angular

angular bootstrap typescript

Last synced: 9 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/enginooby-practice/angular
• Owner: enginooby-practice
• Created: 2020-07-14T17:03:39.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-27T16:30:54.000Z (over 4 years ago)
• Last Synced: 2024-11-07T15:53:23.604Z (2 months ago)
• Topics: angular, bootstrap, typescript
• Language: TypeScript
• Homepage:
• Size: 144 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# List of practiced topics

### Project Structure

- ```src/app/app.module.ts```: main application module

- ```src/app/app.component.html```: main template HTML page for content placeholder

- ```src/assets``` used to store resources: images, JS, CSS, etc.

- ```node_modules``` directory and ```package.json``` contain all the dependencies.

- ```angular.json``` is the main configuration file of the project.

- ```src/style.css``` is the global CSS style

### New Component

1. Create new project by CLI

   - No routing

   - CSS style

2. Build and run the app

3. Update main template page 

[[app.component.html]()]

4. Create new Component by CLI, files generated:

   - ```.component.ts```: the component class

   - ```.component.html```: the component template HTML

   - ```.component.css```: the component private CSS

   - ```.component.spec.ts```: the unit test specifications

   - Automatically update main app module: include new Component into the module

5. Add new component selector to app template page to include its template to the main app template (web page)

6. Create new class (optional)

[[student.ts]()]

7. Create sample data in the Component 

[[student-list.component.ts]()]

8. Update template HTML page of the component to display sample data 

[[student-list.component.html]()]

### Integrating Bootstrap

1. Get links for remote Bootstrap files: required meta and link tags 

[[URL](https://getbootstrap.com/docs/4.5/getting-started/introduction/#starter-template)]

2. Add the reference links to 

[index.html]()

3. Apply Bootstrap style in the templates

[[app.component.html]()] [[student-list-bootstrap.component.html]()]

   - Wrap the content inside ```
```

4. Update new template URL for the Component if necessary (change template)

[[student-list.component.ts]()]


### Notes - Tips

- ```{{ }}``` reads the property of the related component in template (string interpolation)

- Modifier ```public``` is commonly used for properties in Angular -> no need for getter/setter accessor

### @angular/common API

 [[student-list.component.html]()]

 - ```*ngFor="let  of ``` loops through the array (used for ``````) 

 - ```*ngIf="; else "``` and ```>``` displays the content based on boolean expression result

- ```[ngClass]="{'': }">``` assigns the class to the element based on boolean expression result

### Angular CLI Commands

- ```ng help```: list on commands with the infomation

- ```ng new ```: create new project

- ```ng serve```: build the app and start the server with hot reload (```--open``` automatically open app in browser)

- ```ng generate component ```: create new Component

- ```ng generate class /``` (no ```.ts```): create new TypeScript class inside folder contanning the component