Master Angular 2 - The No Nonsense Course

Learn to build modular Angular 2 apps by creating reusable components, from a sharing section to a search box and top menu, and understand why modularization speeds development.

Compare popular code editors for Angular development, including Sublime Text, Atom, Notepad++ and Visual Studio Code, and learn how extensions and shortcuts boost productivity in this course.

Open your project in Visual Studio Code, create an image component folder, and define an Angular component with a selector and template using the component decorator and necessary imports.

Discover how Angular 2 registers and uses components by declaring and importing an image component in app module.ts, using folder paths and Visual Studio Code auto import to streamline wiring.

Learn how to declare, register, and reuse an Angular 2 component by embedding the image component in the app template, demonstrating modular, repeatable UI with templates and debugging basics.

Everything is a component in Angular; split into reusable components to enable reuse, as shown by mega boom's album and track previews, with components referenced by tags.

Explore building dynamic lists and passing data between components in Angular, pulling data from a backend database, creating rows for lists, and injecting each data item into its respective component.

Create a dynamic list in Angular 2 by using an asterisk directive on a template, looping over an items array, and displaying each item in the list.

Learn how to pass an image array to a reusable image component in Angular 2 by using the input decorator and property binding.

Learn to render images in Angular 2 by binding the image src, apply a thumbnail style to constrain size, and preview how Bootstrap can enhance lists.

Master Angular 2 students learn to pass data from one component to another using the input decorator, render a list from an array with an Angular directive.

Create a simple dating app user interface with a profile, similar matches, and short profile components. Build basic working functionality based on prior homework lessons.

Discover how to build a clean Angular 2 homework app by scaffolding with ng new, serving with ng serve, and structuring with profile and similar list components.

Create and assemble three Angular components—profile, short profile, and similar list—then register them in the module, test by rendering in app component, and structure the app with the components.

Learn to build a list of short profiles in Angular 2 by creating a profiles array, passing each item to a short profile component via input binding.

Create a dating profile in the app by defining properties like name, age, and hotness, render them with headers, and organize components and modules for clear architecture.

Style an angular dating app using external libraries such as bootstrap and Google material design. The next module covers styling the app with external libraries.

Learn to style the dating app using Bootstrap version 4, focusing on responsive, mobile-first design, and explore two methods to include Bootstrap with guidance on choosing the best approach.

Learn how to include bootstrap in Angular 2 projects by linking bootstrap CSS and JS from a content delivery network into the index.html, and optimize loading for speed.

Discover Bootstrap basics by implementing a container and grid layout, creating rows and responsive columns that automatically stack on smaller screens for mobile, tablet, and desktop.

Apply bootstrap 4 styling to headings, muted text, and dividers, add padding and a footer, and differentiate profiles and matches using horizontal rules for a clean dating app UI.

Explore Angular 2 pipes, learning how a pipe takes an existing value and runs it through a process to modify output, enabling reusable transformations like a name pipe.

Master built-in pipes in Angular, including uppercase and lowercase, and chain with the pipe symbol; explore the Angular API for date and async pipes and how to create your own.

Learn to create a custom pipe in Angular 2 by implementing the pipe transform, declaring it with @Pipe, registering it in the module, and using it with the pipe name.

Learn how to pass variables over two pipes in Angular 2 by supplying the variable as the second argument to transform, with the value first, and verify in the app.

Explore routing in Angular as a map for navigation that defines the flow of your app and links list items or top menus to new pages.

Create a new Angular app with Bootstrap styling, build a basic shop layout, and implement a pills navigation menu to explore routing between shop, about, and contact.

Explore how Angular 2 uses a router outlet to load shop, about, and contact views in a one page application, and set up the base href and routing configuration file.

Create Angular 2 app routing module, define routes for a shop path, register router module in the app module, and render shop component via the router outlet.

Set a default route by adding an empty path with pathMatch: 'full' and redirecting to the shop component, ensuring the first matching route loads correctly.

Create and wire the about and contact components, configure app routing, and enable active navbar highlighting with router-link and base options in Angular 2.