This is a project template for university students.
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.
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)
- how to generate new components using
- modules
- what is
module
in Angular - how to use
import
- what is
- pipes
- what is a
pipe
and how to use it to transform data - default angular pipes
- using default
date
pipe
- what is a
- 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
- what is Angular
- Angular HTTP client and RxJS
- how to use Angular
HTTP client
- what is
RxJS
library and when it should be used - what is
Observable
andsubscribe
in RxJS - what is and how to use
async
pipe
- how to use Angular
- 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 inGoogle Fonts
- what is
- SCSS
- how to declare and use
SCSS variables
- how to use
&
parent operator - what is
BEM
methodology
- how to declare and use
- Other
- what is
favicon.ico
- how to declare and use complex
interface
in TypeScript
- what is
This project was generated with Angular CLI version 17.3.1.
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.
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
.
Run ng build
to build the project. The build artifacts will be stored in the dist/
directory.
Run ng test
to execute the unit tests via Karma.
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.
To get more help on the Angular CLI use ng help
or go check out the Angular CLI Overview and Command Reference page.