Install Visual Studio Code, Node.js, and Angular CLI, generate a new Angular project for a password generator with length input, checkboxes for letters, numbers, and symbols, and a reveal popup.

Start and stop an Angular project by running npm start or ng serve to host on localhost:4200, view the default landing page, and stop with Ctrl-C.

Replace starter content in the component template with your HTML, including an H1, label, input, and checkboxes; wrap elements in divs and add a generate button with a password display.

Learn how to implement event binding in Angular by wiring button clicks to component methods, handling input changes and checkboxes, and logging interactions to the console.

Explore property binding syntax in Angular by binding the input value to the component's password property, updating it on button clicks, and understanding how the template reflects class state.

Master property binding, event binding, and interpolation in Angular templates to display and update data. Use double curly braces to print values and call component methods like getName.

Explore Angular versus traditional JavaScript design patterns for form handling, including event-driven inputs, binding to component properties, and updating the dom with a final generated password.

Learn to track checkbox input state in Angular by binding change events, updating component properties like include letters, numbers, and symbols, and validating with a console log during generate actions.

Explore event binding for checkboxes in Angular, track include letters, numbers, and symbols with on change handlers, and update password generation logic with console logs and template strings.

Learn to handle text input in Angular by binding an input event, using dollar sign event, parsing the value to update the password length, and validating not a number.

Build a password by combining letters, numbers, and symbols into a character pool based on length. Assign the generated password to the password property to update the input.

Master property binding in Angular to enable a generate button only when length is entered and at least one character type is selected, using the disabled attribute.

Explore Bulma's docs, install Bulma via npm, and include the CSS in your Angular project to style a form, instead of building CSS from scratch.

Install bulma, then import bulma.css from node_modules into the project's styles.css to apply bulma styling in the Angular app.

Enhance Angular forms with Bulma styling by applying an updated app component HTML from the 014.zip file, updating only HTML elements and classes, not Angular logic.

Explore how structural directives in Angular conditionally render the bottom label and the input based on the password property. Distinguish structural directives from attribute directives and how templates evaluate code.

Deploy your Angular app for free with the Now command line tool, log in, and publish a public link you can share.

Review essential Angular terminology through component templates and the component class. Explore property binding, event binding, interpolation, and structural directives like ngIf and ngFor.

Build a small Angular app that demonstrates two key features and tees up a deep dive into TypeScript, featuring a cards layout with posts, images, titles, and authors.

Set up a new cards project, start the development server, and wire Bulma CSS into styles.css to style a card component guided by the documentation, then test on localhost:4200.

Create the first Bulma-styled card in the Angular app component HTML, with a placeholder image, title Neat Tree, and user at nature; plan to add real images and CSS later.

Learn to include static images in an angular project by placing three provided images in the assets directory, referencing them in image tags, and applying CSS to limit card width.

Explore scoped CSS in Angular by distinguishing global styles from component styles, and learn to apply a width rule to a specific card using the app component CSS.

Create reusable Angular components to display cards without duplicating HTML. Encapsulate HTML, CSS, and logic in a card component and nest it within the app component.

Create a reusable card component with the Angular CLI using ng generate component; it auto-creates four files and is nested inside the app via the app-card selector.

Angular boots the app by loading index.html, injecting scripts, and creating component instances from selectors, then renders templates into the DOM via host elements like app root.

Explore CSS scoping in Angular by moving the card HTML from the app component to the card component template and placing the CSS rule in the card component CSS.

Define a posts array in the app component, then create multiple card components and pass each post's title, image url, username, and content to customize every card.

Learn how to pass data from a parent component to a child card component using property binding and input properties, and render title, image, username, and content.

Master the five-step pattern for parent-to-child communication in Angular: bind title, image, URL, username, and content from the parent to the child using the input decorator.

Pass image URL, username, and content from posts to the three card components. Bind these inputs in the card template with property binding, and render three cards by varying options.

Use the ngFor directive to render a card for every post in the posts array. Bind each post's title, image URL, username, and content to the card.

See how the ngFor directive iterates over a post array in the app component. Access the post variable inside curly braces and on the element, unlike a for of loop.

Learn to lay out cards left to right by applying display:flex to the app host element using the colon host selector, and understand Angular CSS scoping rules.

Deploy your Angular cards app with the now tool, then review component creation, nesting, CSS scoping, input binding with the decorator, ngFor, and TypeScript basics.

Create an optional typing challenge app that reinforces lessons from the password generator and cards projects, with real-time validation and a you win message.

Create a new Angular project named typing, start it, and view the Angular welcome page in your browser. Install Bulma via npm and include it to apply styling.

Generate a new angular project named typing, install and wire bulma into styles.css, then replace landing screen with a title, randomly generated sentence, a text input, and a success message.

Replace the default app component template with typing challenge layout, featuring a title, a paragraph for randomly generated text using faker lorem, and a centered input with a success message.

Set up a random text property in an Angular app, bind it with template interpolation to display a new random sentence, and detect typing to log input.

Learn to detect user input in Angular by binding the input event and reading event.target.value. Implement onInput to log the value and reveal a success message when the text matches.

Master conditional display in Angular by building a template based solution that shows or hides a bottom message based on entered text versus random text, using ng4 for per-character rendering.

Perform character-by-character comparison with a template-based approach. Iterate over text, print each character in a span, and compare with entered text by index to color matches green and mismatches red.

Apply class binding to the span to compare letters with entered text in Angular, enabling real-time feedback. Implement a compare method returning pending, correct, or incorrect classes for CSS styling.

Explore Angular pipes by building a small payment form to format names, dates, and amounts within templates, using built-in pipes and custom pipes.

Build a name input in an Angular app, bind user input to a component property, and display it on screen. Learn how pipes format the output for scenarios like money.

Explore the built-in title case pipe in Angular, learn to apply it in templates to capitalize each word, and inspect the API docs to reuse other pipes.

Switch from bulma to bootstrap in an angular project, install and import bootstrap, then style a payment form with container and form-control, using the title case pipe for name.

Add a date picker to an Angular app by binding a date input to a date property, handling changes with on date change, and formatting later with a pipe.

Format dates in Angular with the date pipe, exploring custom format options and how to pass arguments after the pipe for short or long date outputs.

Explore how to display currency in an Angular form by binding an amount input, handling changes, and using the currency pipe to format values, with locale-aware defaults.

Format currencies using the currency pipe by setting a currency code such as JPY, explore display and digits options, and compare its rules to the decimal pipe.

Learn to format numbers with the decimal pipe in Angular, trim decimals visible for height in centimeters, and control digits with a digits-info string.

Explore how the json pipe prints a data object as json in templates for debugging, updates automatically, and why it's not used in production.

In the modern Angular bootcamp, learn to create a custom pipe that converts miles to kilometers using the Angular CLI, a transform method, and defensive handling for undefined values.

Extend a miles-to-kilometers convert pipe in the modern Angular bootcamp with a custom target units argument, using a switch to output kilometers, meters, or centimeters.

Explore how pipes extend beyond interpolation in templates, including use inside ngIf and binding expressions. Convert miles to kilometers with pipes, wrapping expressions in parentheses.

Explore Angular directives by modifying HTML structure and properties in templates, building and using built-in and custom directives via an image viewer showing image titles with next and previous controls.

Create an images array in the app component with title and URL properties, pull online images from Unsplash, and iterate to enable basic pagination, focusing on directives.

Learn to render a pagination list from an images array with the NgFor directive in Angular, exposing index via let i = index and displaying i + 1 for numbering.

Master the Angular class directive by exploring plain strings, helper methods like get class, and returning an object, a string, or an array of classes for dynamic styling.

Add hard-coded previous and next buttons outside the ng4 directive and use the class directive to conditionally apply the disabled class when on the first or last page.

Update the current page value by clicking numbered links, previous, or next buttons using an ngfor loop and anchor tag click handlers. Prepare to display images and explore another directive.

Display images under a paginator by binding the current page of an images array to the image src and title using interpolation and property binding, with zero-based indexing.

learn to manage a long paginator by duplicating image objects to extend content, then use the ngIf directive to limit visible pages to five.

Apply ng-for and ng-if with ng-container to build a paginated list, enforce the one-structural-directive-per-element rule, and create a five-item visibility window around the current page.

Explains how the switch structural directive and switch case work in Angular, using current page values to display matching elements and a switch default for unknown pages.

Learn to build a custom Angular directive using the command line interface, then implement a class directive that toggles element classes from a boolean map, mirroring the built-in directive behavior.

Learn how a custom Angular directive accesses the host element via ElementRef and nativeElement to set a style, such as an orange background.

Learn to pass a dynamic background color to a custom Angular directive using property binding and the input decorator, illustrating parent-to-directive communication and practical debugging tips.

Learn how to intercept a property assignment on an Angular directive using a TypeScript setter, move code to a location, and use the @Input decorator to update the background color.

Learn input aliasing to map the outside app class property to the directive's background color method, enabling seamless use of the app class directive through the input decorator.

Replacing NgClass with a custom app class directive that uses a class object and a for-in loop to apply or remove classes via the element's class list.

Learn to build a custom structural directive app times that duplicates its content a specified number of times using template ref and view container ref.

Replace the Ng4 directive with an App Times directive to render items equal to images.length, using a context object to expose index through aliasing, and compare structural and attribute directives.

Explore semantic ui as a css and javascript library, then re-implement its widgets in angular to build reusable components across pages like elements, collections, and views, including modal and accordion.

Master Angular routing to show different pages as the URL changes, organize components into modules, and design reusable widgets for future projects.

Explore how Angular uses modules to organize features by creating domain, rooted, routing, service, and widget modules, including the app module, illustrated with a to-dos and weather example.

Generate routed modules with the Angular CLI using ng g m and dash dash routing, creating elements, collections, mods, and views with routing modules.

Export the elements home component from the elements module and import the module into the app module. Render the component via the router outlet to display it on screen.

Create a collections home component in the collections module with Angular CLI, export it, import the collections module into the app module, and render it in the app component.

Create and export a new collections home component in Angular with ng generate component, import the collections module into the app, and render it in the app template.

Master module property definitions in Angular by using declarations, imports, and exports to manage components and module dependencies. Ignore providers, and use bootstrap only for the app entry.

Learn to replace a domain module with a routed module and configure a routing module to display the elements home component when the URL matches /elements.

Practice routing by wiring the collections module to display the collections home component only at the /collections route, removing its export and updating the collections routing module.

Remove the export from the collections module and add a route in the collections routing module to display the collections home component at localhost:4200/collections.

Explore how the router outlet renders the elements home component or collections through routing modules, while the app module imports encapsulated modules that expose their routing configuration.

learn to build a persistent navigation bar above the router outlet and use routerLink to navigate between routes like elements and collections without full page refresh.

Install semantic ui css and import it into styles to enable navigation and content styling, using ui container, ui secondary pointing menu, and ui segment around the router outlet.

Highlight the currently visited link in Angular by applying the router link active class to anchors, enabling an active style (or any class) such as Semantic UI underline.

The lecture shows adding a home component for the root route and a not found component for unknown routes, wired in the app routing module to display content at localhost:4200.

Discover why not found shows up and how to fix routing by reordering Angular routing modules in the imports, so elements and collections routes render before the app routing module.

Update the home and not found components in an Angular app, replacing templates to display a landing page and an error message for invalid routes.

Explore how lazy loading in Angular loads only the minimum code for the root route and fetches modules like elements and collections on demand to speed up apps.

Implement lazy loading for the collections and elements modules by removing imports, configuring app routing with loadChildren and dynamic import, and adjusting nested routes to ensure smooth, faster initial load.

Explore lazy loading in angular routing by fixing paths between the elements and collections modules, then apply the same steps to the collections module and verify with the network log.

Turn the collections module into a lazy loaded module by removing imports and configuring app routing with loadChildren and dynamic import. Achieve faster initial loads with on-demand route loading.

Build a standalone placeholder component in the Elements module and render it inside the Elements home component, using Semantic UI placeholder markup and line variations.

Learn to customize the placeholder component by adding configuration options for header and lines, pass them from parent to child, and toggle visibility with the Angular *ngIf directive.

Create a reusable widget module in Angular to host a shared header component with an h1 and a UI divider across multiple modules.

Create a shared module with a reusable divider component and export it for use in the elements module, enabling a customizable title across pages.

Learn how to use Angular's ng-content to project inner content into a divider component, enabling header text to be provided directly inside app-divider, enhancing reusability with content slots.

Explore the segment component by generating a new Angular component in the elements module from the semantic documentation and wiring up a customizable ui with icons, text, and buttons.

Master building a reusable segment component in Angular by using content projection with select to route header, icon, and button content into the appropriate template regions.

The modern Angular bootcamp teaches hiding empty header elements in the segment component by using a :empty selector to remove margins and center the button.

Design a reusable table component by passing data and headers as separate inputs, map rows from data objects, and use header keys and labels to define column order.

Generate a new table component in the collections module, display it on the collections home view, and add an app divider header using the shared module.

Define a data array and a headers array in the parent collections home component and pass them to the app table using the input decorator for a reusable Angular table.

Build a reusable Angular data table that renders header columns from a headers array, printing header.label, and displays row data by header.key from a data array using ng4.

Configure a reusable table component by passing class names from the parent and applying them to the table element, enabling striped and celled styling from Semantic UI through input aliasing.

Link tab selection to the url in Angular by routing to /collections, /collections/companies, and /collections/partners, showing the corresponding content components and highlighting the active tab.

Create three components, biography, companies, and partners, within the collections module and configure collections routing to render them as child routes via a router outlet.

Explore how the app routing module lazily loads child routes for elements and collections, joins empty strings with slashes, and uses a router outlet to render nested components.

Build a bottom tabbed menu powered by router links, highlighting the active biography, companies, and partners tabs with routerLinkActive, and structure the layout with a grid and a segment.

Learn how Angular router links use relative references, like dot slash and dot dot slash, to navigate; compare with absolute paths for predictable routing and highlighting.

Explore an alternate router link syntax in Angular, using the property binding form with an array to build links, join parts automatically, and reference component properties.

Explore making an Angular router link active only for an exact path with routerLinkActiveOptions and exact true, preventing partial matches like /collections from highlighting /collections/partners.

Refactor the existing tabs into a reusable component inside the collections module and migrate markup to the app tabs. Choose to embed anchor links directly for now.

Add a header link and configure lazy loading for the views module, then generate the views home and statistics components and set routing to show home at the empty path.

Create a reusable statistics component by passing a data array of values and labels from a parent view, then iterate with the ngfor directive to render each statistic.

Create a reusable item list component in Angular that renders items with images, titles, and descriptions using ngFor and an input. Bind the items array from the home view.