Angular Advanced MasterClass & FREE E-Book

Post clear questions with minimal code to get faster, accurate answers in the Angular Q&A section, sharing npm install and port conflict solutions to boost learning.

Build custom input components with Font Awesome and Google Material Icons, featuring icon-enhanced fields and content projection. Learn styling, API design, testing, and npm publishing for a reusable Angular library.

Prototype and implement a Font Awesome input component in Angular, adding an icon input property, using ngClass for dynamic Font Awesome classes, and render the envelope icon before the input.

Explore how Angular style isolation increases specificity with custom attributes to keep component styles from leaking, previewing component-level styling, font awesome icons, and how Angular CLI injects styles.

Explore how the Angular host pseudo selector styles the host element of a component, creating a unified border and focus behavior for the input and icon.

Design component APIs with content projection to pass inputs from outside instead of hardcoding properties, using ng-content to render external content and avoid wrapping plain inputs.

Explore ng-content and the Angular style isolation mechanism, mastering content projection and the deep styling modifier to preserve or override styles across projected content.

Explore how the content child decorator enables access to a component’s projected content, using after content init and content shell to apply focus styling on native input elements.

Implement input focus behavior in Angular by using an auxiliary directive and a host listener to detect focus and blur, mirroring native input borders.

Apply the host binding decorator to add or remove the input focus class on the host element based on focus state, and guard against missing inputs with console errors.

Learn to separate structural styles from theme styles, create a default theme for components, ship alternate themes with a library, and override CSS while exploring style isolation modes.

Create an alternative theme for a component, ship it with the library, and use a host context selector with a wrapping class to apply the red theme to inputs.

Explore Angular CLI Sass integration to write readable, maintainable component styles with variables, nesting, and ampersand syntax, while applying a red host theme and examining style isolation modes.

Explore Angular's emulated view encapsulation, enabling default style isolation, override the stripe field with specific styles, and understand its limits against external styles.

Explore alternative css handling in Angular by comparing emulated, native, and none view encapsulation, including shadow dom and browser defaults, and prepare your library with ahead-of-time compilation and tests.

Set up an angular library module, ensure ahead-of-time compatibility, export directives, and create an index.ts for easy import and testing with ng serve --prod --aot.

Learn to perform integration tests for an Angular component, using a sample app, adding IDs and CSS classes, and validating input projection, rendering, and the Font Awesome icon.

Discover the Angular CLI testing infrastructure, use Jasmine with a test bed to compile templates via async, test a component with a fixture, and run npm test.

Master integration testing for the font awesome input component by validating the email field and its icon with the correct classes inside the template.

Refactor angular component tests to produce a clearer test report by splitting into multiple specs, validating email input presence, icon rendering, and input projection for easier debugging.

Learn to debug Angular tests by inspecting element HTML and addressing timing issues with manual change detection using fixture.detectChanges. Prepare for publishing to npm and a material design input exercise.

Publish your Angular library to a private npm repository or via the Angular package format; log in, configure npmignore and gitignore, run tests, bump version, remove private flag, and publish.

Consolidate a material design input component and compare it with font awesome, focusing on reusing existing implementation. Review the solution together in the next lesson.

Publish an Angular library to npm using the Angular package format version four, with the quickstart lib seed, ensuring compatibility beyond the Angular CLI and JIT support.

Publish the Font Awesome library in the Angular package format, applying minor adaptations, building a new version, and validating via Angular CLI and SystemJS tests before npm publishing.

Publish and verify an Angular library by testing it in an Angular CLI project and a system.js setup, using npm version 1.2.8 and a test dash CLI workflow.

Explore a tab container component with a configurable look and feel, featuring a tab panel and overridable templates. Use ng-template and content projection to customize tab buttons and content.

Switch to the dash tab panel branch in Angular to review the initial HTML and CSS for a tab container with login, signup, and contact tabs, and preview Sass-driven styling.

Explore commonly used Sass features for modular component styling, including variables, nested selectors, and imports, demonstrated through a tab panel with theme variables and state classes.

Define the tab panel public API, create tab panel and tab components, implement content projection with ng-content, and add login, signup, and contact forms, styling with sass theme variables.

Learn to use content projection with content children to collect tab components, access their titles in after content init, and render dynamic tab headers in the tab panel.

Implement a functional tab container with a selectable single tab, defaulting to the first tab when none is selected, using Angular features like ngIf, ngClass, and templates.

Simulate user interactions in Angular component tests by clicking the login tab to reveal the login panel and activate the login button.

Create a reusable Angular modal with login and signup tabs, learn to implement structural directives and a custom directive, and see how module directives interact through a service.

Implement the first version of a modal component with overlay and body using HTML and Sass. Export the modal, set a 300-pixel width, and enable content projection.

Develop a configurable modal by supporting both content projection and input templates. Implement input body of type template ref, switch to template outlet when provided, otherwise fall back to ng-content.

Build a structural directive to open and close a modal on click, escape, or outside clicks, with input references and a public API. Explain star syntax desugaring and ngIf comparison.

Implement a structural directive using a template and view container to open a modal on click, supporting multiple elements and embedded views, with inter-directive communication.

Implement a modal close mechanism that closes on overlay click, and explore directive interaction between a modal component and its open directive using content child and asterisk syntax.

Learn to implement global escape-key handling in Angular with the Global Event Manager, toggleable via hide on escape and hide on click outside boolean inputs, closing modals and preventing leaks.

Learn Angular multi-slot projection in a modal, enabling a custom close icon through content projection and selector-based content separation.

Learn to complete the authentication dialog by using ng-template inputs to pass a context object to the modal, control login or signup tabs, and display a dynamic title.

Implement and test a modal component in Angular by adding a test modal and a test button, querying the DOM, and verifying the modal opens on click with integration tests.

Build an Angular input mask directive to handle keyboard input for credit cards, dates, and other fields, demonstrated via a live sample app and branch workflow.

Implement the input mask placeholder using the reduce operator, building the placeholder via a buildPlaceholder function that treats special characters as literals and digits as underscores.

Block default keyboard behavior with a host listener, intercept keydown events, and implement a custom input mask that overwrites characters and handles cursor navigation.

Implement keyboard handling for the input mask directive by overwriting the current cursor character with the pressed key. Refactor into a reusable overwriteCharAtPosition function in mask utilities and adjust cursor.

Implement left and right arrow cursor navigation in an input mask by calculating the position before and after the cursor, skipping special characters, and using setSelectionRange for seamless editing.

Enhance angular input masking by implementing digit validation with regular expressions, covering vat and date validators, while avoiding null or undefined checks and using a never validator as fallback.

Implement the input mask directive by handling backspace and delete, ensuring correct cursor positioning with an underscore placeholder, and enabling content selection for copy-paste.

Master the browser native select event for input masks, detect full-field selection to reset and start at the first editable character, enabling ctrl/cmd copy and paste of the formatted value.

Combine directives and components to build a payment modal with a tab panel, featuring Stripe and PayPal tabs, and animate its opening and closing with Angular animations.

Implement fade in and fade out animations for a modal using angular animations domain specific language, define them in animations.ts, and apply via the browser animations module to the modal.

Define a fade in and fade out animation trigger and apply it to a modal using animation DSL, with transitions from void to open and from any state to void.

Conclude by reviewing component and directive design in Angular, emphasizing content projection over many inputs/outputs, using templates for defaults, and implementing reusable modal, input mask directives, and animations.