### Context Menu Example Source: https://material.angular.dev/cdk/menu/examples Demonstrates a basic context menu implementation. No specific setup is required beyond including the MatMenuModule. ```typescript import {Component} from '@angular/core'; /** * @title Basic menu */ @Component({ selector: 'menu-overview-example', templateUrl: 'menu-overview-example.html', styleUrls: ['menu-overview-example.css'], }) export class MenuOverviewExample {} ``` -------------------------------- ### Basic Overlay Example Source: https://material.angular.dev/cdk/overlay/examples Demonstrates the fundamental setup for creating and displaying an overlay. This is useful for creating tooltips, dialogs, or custom popups. ```typescript import { Component, ElementRef, ViewChild, ViewContainerRef, inject, } from "@angular/core"; import { Overlay, OverlayConfig, OverlayRef, } from "@angular/cdk/overlay"; import { CdkOverlayOrigin, ConnectedPosition, } from "@angular/cdk/overlay"; import { TemplatePortal, PortalModule, } from "@angular/cdk/portal"; @Component({ selector: "overlay-basic-example", templateUrl: "overlay-basic-example.html", styleUrls: ["overlay-basic-example.css"], standalone: true, imports: [PortalModule, CdkOverlayOrigin], }) export class OverlayBasicExample { @ViewChild("overlayOrigin") overlayOrigin: CdkOverlayOrigin; @ViewChild("overlayTemplate") overlayTemplate: TemplatePortal; private overlay = inject(Overlay); private viewContainerRef = inject(ViewContainerRef); private overlayRef: OverlayRef; openOverlay() { const overlayConfig: OverlayConfig = { hasBackdrop: true, backdropClass: "cdk-overlay-transparent-backdrop", positionStrategy: this.overlay .position() .flexibleConnectedTo(this.overlayOrigin.elementRef) .withPositions([ { originX: "start", originY: "bottom", overlayX: "start", overlayY: "top", }, ]), }; this.overlayRef = this.overlay.create(overlayConfig); this.overlayRef.attach(this.overlayTemplate); } closeOverlay() { this.overlayRef.dispose(); } } ``` -------------------------------- ### Toolbar Overview Example Source: https://material.angular.dev/components/toolbar/examples A basic Material Angular toolbar example, often used as a starting point. ```html My App ``` -------------------------------- ### Basic Chips Example Source: https://material.angular.dev/components/chips/examples A simple example of displaying a list of basic chips. ```html {{fish}} ``` -------------------------------- ### Basic Timepicker Example Source: https://material.angular.dev/components/timepicker/examples A simple example demonstrating the basic functionality of the Material Timepicker. This serves as a starting point for using the component. ```typescript import {Component} from '@angular/core'; /** * @title Basic timepicker */ @Component({ selector: 'timepicker-basic-example', templateUrl: 'timepicker-basic-example.html', styleUrls: ['timepicker-basic-example.css'], }) export class TimepickerBasicExample {} ``` ```html Pick a time access_time ``` -------------------------------- ### Badge Overview Examples Source: https://material.angular.dev/components/badge/examples Demonstrates different ways to apply badges to text, buttons, and icons. Includes examples with different badge sizes and content. ```html Text with a badge4 ``` ```html Text with small badge1 ``` ```html Text with large badge1 ``` ```html Button with a badge on the left Action 8 ``` ```html Button toggles badge visibility Hide 7 ``` ```html Icon with a badge home15 Example with a home icon with overlaid badge showing the number 15 ``` -------------------------------- ### Start Angular Development Server Source: https://material.angular.dev/guide/getting-started Command to compile the application and start a local development server to view the changes in the browser. ```bash ng serve ``` -------------------------------- ### Tooltip Harness Example Source: https://material.angular.dev/components/tooltip/examples This example is intended for testing purposes and demonstrates how to use `MatTooltipHarness` to interact with tooltips in tests. It requires opening in Stackblitz to run the tests. ```typescript import { Component } from '@angular/core'; /** * @title Testing with MatTooltipHarness */ @Component({ selector: 'tooltip-harness-example', templateUrl: 'tooltip-harness-example.html', styleUrls: ['tooltip-harness-example.css'], }) export class TooltipHarnessExample {} ``` -------------------------------- ### Basic Drawer Example Source: https://material.angular.dev/components/sidenav/examples A fundamental implementation of a drawer component, serving as a basic sidenav. This is a starting point for more complex drawer functionalities. ```typescript import { Component, HostBinding, OnInit, ViewEncapsulation, } from '@angular/core'; import { FormControl } from '@angular/forms'; /** @title Basic drawer */ @Component({ selector: 'basic-drawer', templateUrl: 'basic-drawer.html', styleUrls: ['basic-drawer.css'], // Use OnPush change detection for better performance changeDetection: ChangeDetectionStrategy.OnPush, // Encapsulation is used to limit the CSS to this component encapsulation: ViewEncapsulation.None, }) export class BasicDrawer implements OnInit { showFiller = false; // Use HostBinding to set the width of the sidenav @HostBinding('class.example-width') exampleWidth = true; // Use FormControl to control the width of the sidenav fillerContent = new FormControl(50); // Use OnInit to initialize the sidenav ngOnInit() { // Set the initial width of the sidenav this.fillerContent.valueChanges.subscribe(value => { this.exampleWidth = true; }); } } ``` -------------------------------- ### Testing Expansion Panels with Harnesses Source: https://material.angular.dev/components/expansion/examples This example demonstrates how to use `MatExpansionPanelHarness` and `MatAccordionHarness` for testing expansion panel components. It's recommended to open this example in Stackblitz to run the tests. ```typescript import {ComponentHarness, TestElement} from '@angular/cdk/testing'; /** Harness for interacting with a basic expansion panel in tests. */ export class MatExpansionPanelHarness extends ComponentHarness { /** The selector for the host element of `MatExpansionPanel`. */ static hostSelector = 'mat-expansion-panel'; /** Clicks the panel header to toggle the expanded state. */ async click(): Promise { const header = await this.locatorForOptional('.mat-expansion-panel-header')(); if (header) { await header.click(); } } /** Gets the expanded state of the panel. */ async isExpanded(): Promise { const host = await this.host(); return host.hasClass('mat-expanded'); } /** Gets the text content of the panel body. */ async getBodyText(): Promise { const body = await this.locatorForOptional('.mat-expansion-panel-content')(); return body ? (await body.text()) : ''; } } /** Harness for interacting with a `MatAccordion` in tests. */ export class MatAccordionHarness extends ComponentHarness { /** The selector for the host element of `MatAccordion`. */ static hostSelector = '.mat-accordion'; /** Gets all the expansion panels in the accordion. */ async getExpansionPanels(): Promise { return this.locatorForAll(MatExpansionPanelHarness)(); } /** Gets all the expansion panels that are currently expanded. */ async getExpandedExpansionPanels(): Promise { return this.locatorForAll(MatExpansionPanelHarness.with({expanded: true}))(); } /** Gets the expansion panel that matches the given configuration. */ async getExpansionPanel(options: {expanded?: boolean; disabled?: boolean}): Promise { return this.locatorForOptional(MatExpansionPanelHarness.with(options))(); } /** Gets the expansion panels that match the given configuration. */ async getExpansionPanels(options: {expanded?: boolean; disabled?: boolean}): Promise { return this.locatorForAll(MatExpansionPanelHarness.with(options))(); } } ``` -------------------------------- ### Basic Sidenav Example Source: https://material.angular.dev/components/sidenav/examples A simple, foundational sidenav implementation. This serves as a starting point for understanding the core structure and usage of the sidenav component. ```typescript import { Component, HostBinding, OnInit, ViewEncapsulation, } from '@angular/core'; import { FormControl } from '@angular/forms'; /** @title Basic sidenav */ @Component({ selector: 'basic-sidenav', templateUrl: 'basic-sidenav.html', styleUrls: ['basic-sidenav.css'], // Use OnPush change detection for better performance changeDetection: ChangeDetectionStrategy.OnPush, // Encapsulation is used to limit the CSS to this component encapsulation: ViewEncapsulation.None, }) export class BasicSidenav implements OnInit { showFiller = false; // Use HostBinding to set the width of the sidenav @HostBinding('class.example-width') exampleWidth = true; // Use FormControl to control the width of the sidenav fillerContent = new FormControl(50); // Use OnInit to initialize the sidenav ngOnInit() { // Set the initial width of the sidenav this.fillerContent.valueChanges.subscribe(value => { this.exampleWidth = true; }); } } ``` -------------------------------- ### Basic Tooltip Example Source: https://material.angular.dev/components/tooltip/examples A fundamental example of a basic tooltip. This demonstrates the simplest way to add tooltip functionality to an element. ```typescript import { Component } from '@angular/core'; /** * @title Basic tooltip */ @Component({ selector: 'tooltip-overview-example', templateUrl: 'tooltip-overview-example.html', styleUrls: ['tooltip-overview-example.css'], }) export class TooltipOverviewExample {} ``` -------------------------------- ### Form Field with Input, Select, and Textarea Source: https://material.angular.dev/components/form-field/overview Demonstrates a basic form field setup including native input, select, and textarea elements. This serves as a foundational example for using ``. ```html ``` -------------------------------- ### Basic Checkboxes Example Source: https://material.angular.dev/components/checkbox/examples A simple example demonstrating the basic usage of checkboxes. This is suitable for straightforward selections where no complex configuration is needed. ```html Check me! Check me! Disabled Checked

Parent task

  • Child task 1
  • Child task 2
  • Child task 3
``` -------------------------------- ### Chips in Reactive Forms Example Source: https://material.angular.dev/components/chips/examples Demonstrates how to integrate chips within a reactive form, allowing dynamic addition and removal of keywords. This example includes 'angular', 'how-to', 'tutorial', and 'accessibility' keywords. ```html Video keywords {{keyword.tag}} ``` -------------------------------- ### Stacked Chips Example Source: https://material.angular.dev/components/chips Illustrates how to stack multiple chips. ```html Chip 1 Chip 2 Chip 3 ``` -------------------------------- ### Basic List Example Source: https://material.angular.dev/components/list/overview A simple list displaying basic content. This serves as a foundational example for using the Angular Material list. ```html Item 1 Item 2 Item 3 ``` -------------------------------- ### Accordion Overview Example Source: https://material.angular.dev/cdk/accordion Demonstrates the basic structure and interaction of an accordion component using CDK Accordion. This example shows multiple expandable items. ```html Item 1 Click to open

This is the expand content for item 1.

Item 2 Click to open

This is the expand content for item 2.

Item 3 Disabled

This is the expand content for item 3.

``` -------------------------------- ### List with Selection Example Source: https://material.angular.dev/components/list An example demonstrating a Material Angular list with selection enabled. This allows users to select items from the list. ```html Item 1 Item 2 Item 3 ``` -------------------------------- ### Basic CDK Data-Table Example Source: https://material.angular.dev/cdk/table A complete example of a CDK data-table with three columns: 'username', 'age', and 'title'. It includes column definitions and row declarations, binding to a `dataSource`. ```html
User name {{row.username}} Age {{row.age}} Title {{row.title}}
``` -------------------------------- ### Example: Table with Three Columns Source: https://material.angular.dev/cdk/table/overview A complete example of a CDK data-table with three columns: username, age, and title. It includes column definitions and row declarations. ```html
User name {{row.username}} Age {{row.age}} Title {{row.title}}
``` -------------------------------- ### Simple Autocomplete Source: https://material.angular.dev/components/autocomplete/examples A straightforward autocomplete example. ```typescript import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; /** * @title Simple autocomplete */ @Component({ selector: 'autocomplete-simple-example', templateUrl: 'autocomplete-simple-example.html', styleUrls: ['autocomplete-simple-example.css'], }) export class AutocompleteSimpleExample { myControl = new FormControl(''); options: string[] = ['Angular', 'Babel', 'Ember', 'Jasmine', 'Karma', 'Micronaut', 'React', 'Vue']; filteredOptions: Observable; constructor() { this.filteredOptions = this.myControl.valueChanges.pipe( startWith(''), map(value => this._filter(value || '')), ); } private _filter(value: string): string[] { const filterValue = value.toLowerCase(); return this.options.filter(option => option.toLowerCase().includes(filterValue)); } } ``` -------------------------------- ### Autocomplete Overview Source: https://material.angular.dev/components/autocomplete/examples A basic example of an autocomplete input. ```typescript import {Component} from '@angular/core'; import {FormControl} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; /** * @title Basic autocomplete */ @Component({ selector: 'autocomplete-overview-example', templateUrl: 'autocomplete-overview-example.html', styleUrls: ['autocomplete-overview-example.css'], }) export class AutocompleteOverviewExample { stateCtrl = new FormControl(''); states: string[] = [ 'Arkansas', 'California', 'Illinois', 'New York', 'North Carolina', 'Rhode Island', 'Washington', ]; filteredStates: Observable; constructor() { this.filteredStates = this.stateCtrl.valueChanges.pipe( startWith(''), map(state => (state ? this._filterStates(state) : this.states))) ; } private _filterStates(value: string): string[] { const filterValue = value.toLowerCase(); return this.states.filter(state => state.toLowerCase().includes(filterValue)); } } ``` -------------------------------- ### Overlay Setup and Creation Source: https://material.angular.dev/cdk/overlay This snippet shows how to import the necessary overlay styles and create a basic overlay instance. ```APIDOC ## Overview for overlay The `overlay` package provides a way to open floating panels on the screen. ### Initial setup The CDK overlays depend on a set of structural styles to work correctly. If you're using Angular Material, these styles have been included with the theme. Otherwise, if you're using the CDK on its own, you'll need to include the styles yourself by importing the prebuilt styles in your global stylesheet: ```typescript @import '@angular/cdk/overlay-prebuilt.css'; ``` ### Creating overlays Calling `overlay.create()` returns an `OverlayRef` instance, which is a handle for managing that specific overlay. The `OverlayRef` is a `PortalOutlet`; once created, content can be added by attaching a `Portal`. See the documentation on portals for further information. ```typescript import {ComponentPortal} from '@angular/cdk/portal'; import {Overlay} from '@angular/cdk/overlay'; // Assuming 'overlay' is an instance of Overlay const overlayRef = overlay.create(); const userProfilePortal = new ComponentPortal(UserProfile); overlayRef.attach(userProfilePortal); ``` ``` -------------------------------- ### Action List Example Source: https://material.angular.dev/components/list/examples Demonstrates a basic action list with clickable items. Use for simple lists where each item performs an action. ```html ``` -------------------------------- ### getStartInput Source: https://material.angular.dev/components/datepicker/api Gets the inner start date input element within the range input component. This allows for direct interaction with the start date input field. ```APIDOC ## getStartInput ### Description Gets the inner start date input inside the range input. ### Method `getStartInput(): Promise` ``` -------------------------------- ### getSeparator Source: https://material.angular.dev/components/datepicker/api Gets the separator text that appears between the start and end date inputs. This is useful for verifying the visual formatting of the range input. ```APIDOC ## getSeparator ### Description Gets the separator text between the values of the two inputs. ### Method `getSeparator(): Promise` ``` -------------------------------- ### Configurable Paginator Example Source: https://material.angular.dev/components/paginator/examples Demonstrates a configurable paginator with options for page size, page index, and visibility of navigation buttons. Includes event output. ```typescript import { Component, OnInit, ViewChild } from '@angular/core'; import { MatPaginator, PageEvent } from '@angular/material/paginator'; /** * @title Configurable paginator */ @Component({ selector: 'paginator-configurable-example', templateUrl: 'paginator-configurable-example.html', styleUrls: ['paginator-configurable-example.css'] }) export class PaginatorConfigurableExample implements OnInit { @ViewChild(MatPaginator) paginator: MatPaginator; length = 50; pageSize = 10; pageSizeOptions = [5, 10, 25, 100]; // MatPaginator inputs pageEvent: PageEvent; ngOnInit() { // Initialize with default values if needed } // Handle page event handlePage(e: PageEvent) { this.pageEvent = e; } } ``` -------------------------------- ### Responsive Sidenav Example Source: https://material.angular.dev/components/sidenav/examples Shows how to implement a responsive sidenav that adapts its behavior and appearance based on screen size. This ensures optimal user experience across devices. ```typescript import { Component, HostBinding, OnInit, ViewEncapsulation, } from '@angular/core'; import { FormControl } from '@angular/forms'; /** @title Responsive sidenav */ @Component({ selector: 'responsive-sidenav', templateUrl: 'responsive-sidenav.html', styleUrls: ['responsive-sidenav.css'], // Use OnPush change detection for better performance changeDetection: ChangeDetectionStrategy.OnPush, // Encapsulation is used to limit the CSS to this component encapsulation: ViewEncapsulation.None, }) export class ResponsiveSidenav implements OnInit { showFiller = false; // Use HostBinding to set the width of the sidenav @HostBinding('class.example-width') exampleWidth = true; // Use FormControl to control the width of the sidenav fillerContent = new FormControl(50); // Use OnInit to initialize the sidenav ngOnInit() { // Set the initial width of the sidenav this.fillerContent.valueChanges.subscribe(value => { this.exampleWidth = true; }); } } ``` -------------------------------- ### Chips with Input Example Source: https://material.angular.dev/components/chips Shows how to implement chips that allow user input. ```html ``` -------------------------------- ### getEndInput Source: https://material.angular.dev/components/datepicker/api Gets the inner start date input element within the range input component. This allows for direct interaction with the end date input field. ```APIDOC ## getEndInput ### Description Gets the inner start date input inside the range input. ### Method `getEndInput(): Promise` ``` -------------------------------- ### Basic Date Range Picker Source: https://material.angular.dev/components/datepicker/examples A fundamental example of a date range picker for selecting a start and end date. Suitable for general date selection needs. ```typescript import {Component} from '@angular/core'; /** * @title Basic date range picker */ @Component({ selector: 'datepicker-range-picker-example', templateUrl: 'datepicker-range-picker-example.html', styleUrls: ['datepicker-range-picker-example.css'] }) export class DatepickerRangePickerExample {} ``` -------------------------------- ### Creating a Light Theme Source: https://material.angular.dev/guide/material-2-theming Demonstrates how to construct a light theme using defined color palettes, typography, and density. ```APIDOC ## Creating a Light Theme ### Description Constructs a light theme configuration for Angular Material components. ### Method Sass function calls ### Endpoint N/A (Sass configuration) ### Parameters N/A ### Request Example ```sass @use '@angular/material' as mat; $my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500); $my-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400); // The "warn" palette is optional and defaults to red if not specified. $my-warn: mat.m2-define-palette(mat.$m2-red-palette); $my-theme: mat.m2-define-light-theme(( color: ( primary: $my-primary, accent: $my-accent, warn: $my-warn, ), typography: mat.m2-define-typography-config(), density: 0, )); ``` ### Response N/A (Sass variable `$my-theme` is defined) ### Response Example N/A ``` -------------------------------- ### Date Range Input Setup Source: https://material.angular.dev/components/datepicker Sets up the necessary input elements for selecting a date range. Requires two input fields for start and end dates. ```html ``` -------------------------------- ### Enable Strong Focus Indicators Source: https://material.angular.dev/guide/typography Call `mat.strong-focus-indicators()` to enable highly visible outlines on focused elements, improving accessibility. This example includes it alongside a base theme setup. ```scss @use "@angular/material" as mat; html { color-scheme: light dark; @include mat.theme((color: mat.$violet-palette, typography: Roboto, density: 0)); @include mat.strong-focus-indicators(); } ``` -------------------------------- ### Slider with Custom Thumb Label Formatting - Material Angular Source: https://material.angular.dev/components/slider/examples Shows how to customize the thumb label formatting for a Material Angular slider. This example requires specific component setup. ```html ``` -------------------------------- ### Get Expansion Panel HarnessPredicate Source: https://material.angular.dev/components/expansion/api Gets a HarnessPredicate that can be used to search for an expansion-panel with specific attributes. ```APIDOC ## static with (options: ExpansionPanelHarnessFilters = {}) ### Description Gets a `HarnessPredicate` that can be used to search for an expansion-panel with specific attributes. ### Parameters #### Options - **options** (ExpansionPanelHarnessFilters) - Optional - Options for narrowing the search: * `title` (string) - finds an expansion-panel with a specific title text. * `description` (string) - finds an expansion-panel with a specific description text. * `expanded` (boolean) - finds an expansion-panel that is currently expanded. * `disabled` (boolean) - finds an expansion-panel that is disabled. ### Returns `HarnessPredicate` | A `HarnessPredicate` configured with the given options. ``` -------------------------------- ### Creating a HarnessLoader in Testbed Source: https://material.angular.dev/guide/using-component-harnesses This snippet demonstrates how to set up a `HarnessLoader` within a Testbed environment for unit testing. It configures the testing module, creates a component fixture, and initializes the loader. ```typescript import {HarnessLoader} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; let loader: HarnessLoader; describe('my-component', () => { beforeEach(async () => { TestBed.configureTestingModule({imports: [MyModule], declarations: [UserProfile]}); fixture = TestBed.createComponent(UserProfile); loader = TestbedHarnessEnvironment.loader(fixture); }); } ``` -------------------------------- ### List with Icons Example Source: https://material.angular.dev/components/list/examples Demonstrates a list where each item is accompanied by an icon. Useful for visually categorizing list items. ```html folder Inbox inbox Messages folder Outbox outbox Sent folder Drafts drafts New Draft ``` -------------------------------- ### Basic List Example Source: https://material.angular.dev/components/list A basic example of a Material Angular list. This is suitable for purely decorative purposes. ```html Item 1 Item 2 Item 3 ``` -------------------------------- ### Vertical Stepper Example Source: https://material.angular.dev/components/stepper/overview Demonstrates a basic vertical stepper with navigation buttons. ```html
Fill out your name Name
Fill out your address Address
Done You are now done.
``` -------------------------------- ### Basic Paginator Example Source: https://material.angular.dev/components/paginator/examples A simple example of the Material Angular Paginator component displaying basic pagination controls. ```typescript import { Component } from '@angular/core'; /** * @title Basic paginator */ @Component({ selector: 'paginator-overview-example', templateUrl: 'paginator-overview-example.html', styleUrls: ['paginator-overview-example.css'] }) export class PaginatorOverviewExample { // No specific logic needed for this basic example, template handles it. } ``` -------------------------------- ### Chips with Input Example Source: https://material.angular.dev/components/chips/examples Shows a basic implementation of chips that can be added and removed, with an input field for adding new chips. Includes edit and cancel actions. ```html {{chip.name}} ``` -------------------------------- ### Stacked Chips Example Source: https://material.angular.dev/components/chips/examples Shows how to display multiple chips in a stacked layout, representing different dog breeds. ```html {{dog}} ``` -------------------------------- ### Basic mat-select Example Source: https://material.angular.dev/components/select Demonstrates a simple `` component within a `` to display a list of options. Ensure `` and `` are imported. ```html Favorite food Steak Pizza Tacos ``` -------------------------------- ### Basic Tab Group Example Source: https://material.angular.dev/components/tabs/overview A fundamental example of a tab group with basic content. This demonstrates the core functionality of the `mat-tab-group` component. ```html Content 1 Content 2 Content 3 ``` -------------------------------- ### Horizontal Stepper Example Source: https://material.angular.dev/components/stepper/overview Demonstrates a basic horizontal stepper with navigation buttons. ```html
Fill out your name Name
Fill out your address Address
Done You are now done.
``` -------------------------------- ### Interact with Media Queries using MediaMatcher Source: https://material.angular.dev/cdk/layout/overview This example shows how to use `MediaMatcher` to interact with the browser's native `matchMedia` API. `MediaMatcher` normalizes browser differences and provides a testable interface for media query evaluation, returning a `MediaQueryList`. ```typescript @Component({...}) class MyComponent { private mediaMatcher = inject(MediaMatcher); private mediaQueryList = this.mediaMatcher.matchMedia('(min-width: 1px)'); } ``` -------------------------------- ### Basic Chips Example Source: https://material.angular.dev/components/chips Demonstrates the basic implementation of Material Angular Chips. ```html Option 1 Option 2 Option 3 ``` -------------------------------- ### Portal Overview Source: https://material.angular.dev/cdk/portal Explains the core concepts of Portals and PortalOutlets for rendering dynamic UI. ```APIDOC ## Overview for portal The `portals` package provides a flexible system for rendering dynamic content into an application. A `Portal` is a piece of UI that can be dynamically rendered to an open slot on the page. The "piece of UI" can be either a `Component`, a `TemplateRef` or a DOM element and the "open slot" is a `PortalOutlet`. Portals and PortalOutlets are low-level building blocks that other concepts, such as overlays, are built upon. ``` -------------------------------- ### Datepicker Start Date Source: https://material.angular.dev/components/datepicker/examples Demonstrates setting a custom start date for the datepicker's calendar view. Useful for controlling the initial display. ```typescript import {Component} from '@angular/core'; /** * @title Datepicker start date */ @Component({ selector: 'datepicker-start-date-example', templateUrl: 'datepicker-start-date-example.html', styleUrls: ['datepicker-start-date-example.css'] }) export class DatepickerStartDateExample {} ``` -------------------------------- ### TreeKeyManager Basic Usage Source: https://material.angular.dev/cdk/a11y Demonstrates the basic setup for TreeKeyManager, including querying tree items and forwarding keyboard events. ```typescript // Create a @ViewChildren query for the tree items being managed. // Initialize the TreeKeyManager, passing in the options. // Forward keyboard events from the managed component to the TreeKeyManager via onKeydown. ``` -------------------------------- ### Paginator Internationalization Example Source: https://material.angular.dev/components/paginator/examples Demonstrates how to internationalize the Material Angular Paginator by providing custom labels for different languages. This example shows French labels. ```typescript import { Component } from '@angular/core'; import { MatPaginatorIntl } from '@angular/material/paginator'; /** * @title Paginator internationalization */ @Component({ selector: 'paginator-internationalization-example', templateUrl: 'paginator-internationalization-example.html', styleUrls: ['paginator-internationalization-example.css'] }) export class PaginatorInternationalizationExample { constructor(private paginatorIntl: MatPaginatorIntl) { // Example of setting custom labels for French this.paginatorIntl.itemsPerPageLabel = 'Éléments par page'; this.paginatorIntl.nextPageLabel = 'Page suivante'; this.paginatorIntl.previousPageLabel = 'Page précédente'; this.paginatorIntl.firstPageLabel = 'Première page'; this.paginatorIntl.lastPageLabel = 'Dernière page'; } } ``` -------------------------------- ### Overlay Configuration Source: https://material.angular.dev/cdk/overlay Demonstrates how to configure an overlay with specific dimensions and explore positioning strategies. ```APIDOC ### Configuring an overlay When creating an overlay, an optional configuration object can be provided to set properties like height and width. ```typescript const overlayRef = overlay.create({ height: '400px', width: '600px', }); ``` The full set of configuration options can be found in the API documentation. #### Position strategies The `positionStrategy` configuration option determines how the overlay will be positioned on-screen. Two primary strategies are available: `GlobalPositionStrategy` and `ConnectedPositionStrategy`. - `GlobalPositionStrategy`: Used for overlays requiring a specific viewport position, independent of other elements (e.g., modals, notifications). - `ConnectedPositionStrategy`: Used for overlays positioned relative to an "origin" element (e.g., menus, pickers, tooltips). It selects the best position based on viewport fit from a set of preferred positions. `FlexibleConnectedPositionStrategy` offers advanced features over `ConnectedPositionStrategy`, including scrollability, margins, viewport pushing, and transform origin configuration for animations. A custom position strategy can be created by implementing the `PositionStrategy` interface, which requires an `apply` method. #### Scroll strategies The `scrollStrategy` configuration option determines how the overlay reacts to scrolling outside the overlay element. Four strategies are available: - `NoopScrollStrategy`: The default; does nothing. - `CloseScrollStrategy`: Automatically closes the overlay on scroll. - `BlockScrollStrategy`: Prevents page scrolling while the overlay is open. Can be overridden for custom scrolling behavior. - `RepositionScrollStrategy`: Re-positions the overlay on scroll, with potential performance implications. A custom scroll strategy can be created by implementing the `ScrollStrategy` interface, often injecting `ScrollDispatcher` to listen for scroll events. ``` -------------------------------- ### Create an Overlay Instance Source: https://material.angular.dev/cdk/overlay/overview Instantiate an overlay using the `overlay.create()` method. The returned `OverlayRef` serves as a handle to manage the overlay and attach content via a `Portal`. ```typescript const overlayRef = overlay.create(); const userProfilePortal = new ComponentPortal(UserProfile); overlayRef.attach(userProfilePortal); ``` -------------------------------- ### Get HarnessLoader for Content (Deprecated) Source: https://material.angular.dev/components/expansion/api Gets a HarnessLoader that can be used to load harnesses for components within the panel's content area. This method is deprecated. ```APIDOC ## async getHarnessLoaderForContent () ### Description Gets a `HarnessLoader` that can be used to load harnesses for components within the panel's content area. ### Returns `Promise` | ### Deprecated This method is deprecated. ``` -------------------------------- ### Chips with Form Control Example Source: https://material.angular.dev/components/chips/examples Demonstrates chips integrated with form controls, allowing users to enter and manage keywords. Includes options to disable and enable the form control. ```html Video keywords {{keyword.tag}}

Add on blur

``` -------------------------------- ### Timepicker Validation Example Source: https://material.angular.dev/components/timepicker/examples Illustrates how to implement validation for the timepicker, showing error messages when input does not meet specified criteria. This example enforces a time range. ```typescript import {Component} from '@angular/core'; import {FormControl, FormGroup, Validators} from '@angular/forms'; /** * @title Timepicker validation */ @Component({ selector: 'timepicker-validation-example', templateUrl: 'timepicker-validation-example.html', styleUrls: ['timepicker-validation-example.css'], }) export class TimepickerValidationExample { timeForm = new FormGroup({ time: new FormControl('', [ Validators.required, Validators.pattern('^(0[0-9]|1[0-9]|2[0-3]):[0-5][0-9]$'), this.timeValidator, ]), }); get time() { return this.timeForm.get('time'); } timeValidator(control: FormControl) { const time = control.value; if (!time) { return null; } const [hours, minutes] = time.split(':').map(Number); const totalMinutes = hours * 60 + minutes; if (totalMinutes < 750 || totalMinutes > 1050) { return {timeValidator: true}; } return null; } } ``` ```html
Pick a time access_time Time is required Please enter a valid time Enter a value before 12:30 PM or after 5:30 PM

Errors: {{ timeForm.controls.time.errors | json }}

```