Try Angular v4 | An Incredible Front End Framework by Google

Learn how the Angular app module and component use decorators, templates, and data binding to bootstrap an app and view live updates via ng serve.

Learn to generate new components in Angular v4 using ng generate component, name video list and video detail, and see automatic updates to the app module and bootstrap.

Learn how to integrate and render selectors and components in an Angular v4 app, wiring video list and video detail components to create a dynamic, reusable front end.

Learn to loop over arrays with ngFor and conditionally display items using ngIf in Angular v4 by binding a video list of objects with name and slug.

Set up Angular router module to map URLs to video list and detail components, use dynamic slug routes, enable a router outlet, and configure base href for the home page.

Master dynamic routing of components in Angular v4 by using the activated route to extract slug parameters, subscribing to route params, and safely unsubscribing on destroy while handling trailing slashes.

Learn to safely embed YouTube videos in Angular v4 by building a component that generates an embed URL, uses Dom sanitiser to sanitise it, and binds the result in templates.

Learn how to create and use a custom safe pipe in Angular v4 to safely embed external resources, reuse transformations, and format dates with the built-in date pipe.

Explore Bootstrap basics, including CSS and the grid system with 12 columns and responsive layouts, and learn how Angular Bootstrap integrates components for JavaScript usage in Angular.

Install and integrate Bootstrap 3 into an Angular project using ngx-bootstrap, configure styles, add a navbar and dropdowns, and set up basic routing and a footer.

Add a home component and integrate the ngx-bootstrap carousel into an Angular v4 app, wiring routing and module imports for a responsive, image-driven home page.

Learn how to implement Angular click events, use prevent default with mouse events, pass image parameters, manage image attributes, and route to videos via the router.

Learn how to fetch data with angular http requests by simulating a backend with an assets/videos.json file, subscribe to data, and implement a detail view by filtering items by slug.

Update the home component to display video images, add image items with slugs and titles, and filter featured items for a home detail carousel in Angular v4.

Create a search component and enable two-way data binding with ngModel to bind a search query to the form, updating the button as you type and illustrating type ahead.

Explore ngForm basics by building a functional search form that binds inputs to a model, handles submit events, and passes hidden and query data.

Learn to implement a search detail flow in Angular v4 by routing with query parameters and reading them via ActivatedRoute in a dedicated search detail component.

Learn how to pass data to components with the @Input decorator, wire a search component with query and past query, and use the activated route for dynamic searches.

Build a video search feature with a dedicated video service in Angular, using an endpoint to list and get videos via observables, map, and catch for error handling.

Implement a basic search against backend data using a get method, a video service, and simple client-side filtering to populate and refine the video list.

Define a video item model in TypeScript with slug, name, embed, image, and optional featured; map it to video list and detail components for type-safe backend data.

Learn to replace traditional links with router link in Angular v4 to enable router link active highlighting and faster, non-refreshing navigation across the video list and home page.

Improve styling for the video list in an Angular v4 app by turning thumbnails into a browsable gallery, using Bootstrap, and conditionally rendering videos or images with centered media.

Learn how ngClass in Angular applies bootstrap classes conditionally using the item index, using modulo three to create a new row after every third item.

Learn to build production Angular 4 assets with ng build --prod, prepare a node server with a Proc file, and deploy to Heroku for a live, static CDN-ready site.

Showcases how to turn basic Angular knowledge into real projects you can deploy. Learn step-by-step build guidance, share your work in comments, and explore future Angular with Django integrations.