krystianderdzinski/angular-17-project-starting-template

About

This is a project template for university students.

Google Cloud API KEY

You need a Google Cloud account & project API KEY to run this project.

Creating a Google Cloud Project

How to get Google Cloud API KEY

After getting your API KEY, please paste it into API_KEY.const.ts file.

YouTube Data API documentation

YouTube Data API docs

Project purpose

The goal of the project is to understand:

• components
  • how to generate new components using Angular CLI
  • what are component's @Input() values, how to pass data between components
  • styles encapsulation
  • ngIf & ngFor directives
  • what is & how to use dependency injection
  • listening for mouse events (click, mouseenter, mouseleave)
• modules
  • what is module in Angular
  • how to use import
• pipes
  • what is a pipe and how to use it to transform data
  • default angular pipes
  • using default date pipe
• YouTube API & Google Cloud
  • how to configure a new project in Google Cloud
  • how to get and use API key
  • how to browse YouTube API documentation
  • how to embed YouTube video
• routing
  • what is Angular routing
  • what are URL query parameters
  • how to add a new route in app-routing.module.ts
  • what is <router-outlet>
  • what is ActivatedRoute and how to get query parametrs from it
• Angular HTTP client and RxJS
  • how to use Angular HTTP client
  • what is RxJS library and when it should be used
  • what is Observable and subscribe in RxJS
  • what is and how to use async pipe
• Material
  • what is Material UI
  • how to browse Material documentation
  • how to add Material to existing project using ng add command
  • how to use Material components in HTML templates
  • how to use Material icons and how to browse them in Google Fonts
• SCSS
  • how to declare and use SCSS variables
  • how to use & parent operator
  • what is BEM methodology
• Other
  • what is favicon.ico
  • how to declare and use complex interface in TypeScript

AngularProjectStartingTemplate

This project was generated with Angular CLI version 17.3.1.

Development server

Run ng serve for a dev server. Navigate to http://localhost:4200/. The application will automatically reload if you change any of the source files.

Code scaffolding

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI Overview and Command Reference page.