What are some advanced techniques for handling UI state and layout in Angular applications, including responsive design, theming, and component composition?

In Angular applications, handling UI state and layout efficiently is essential for creating seamless user experiences. Here are some advanced techniques to achieve this:

1. **Responsive design**: Angular Flex Layout is a popular library for building responsive web applications. It uses a powerful layout API and CSS flexbox to define the UI structure based on screen size:

Install Angular Flex Layout and its dependencies:

   npm install @angular/flex-layout @angular/cdk

Import the FlexLayoutModule to your app module:

   import { FlexLayoutModule } from '@angular/flex-layout';

   @NgModule({
     imports: [
       FlexLayoutModule,
     ],
   })
   export class AppModule { }

Use the ‘fxLayout‘ directive and the responsive API:

   <div fxLayout="row" fxLayout.xs="column">
     <div fxFlex>
       <!-- Content for small screens -->
     </div>
     <div fxFlex>
       <!-- Content for large screens -->
     </div>
   </div>

The API offers several layout directives like fxLayout, fxFlex, fxLayoutGap, and many others, allowing you to design layouts with different proportions, gaps, and orderings.

2. **Theming**: Angular Material offers a robust theming system that can be customized to create unique user experiences. You can set up global styles and use built-in color palettes or create custom themes:

Install Angular Material:

   ng add @angular/material

Define a custom theme in ‘styles.scss‘:

   @import '~@angular/material/theming';
   @include mat-core();

   $app-primary: mat-palette($mat-indigo);
   $app-accent:  mat-palette($mat-pink, A200, A100, A400);
   $app-warn:    mat-palette($mat-red);

   $app-theme: mat-light-theme($app-primary, $app-accent, $app-warn);

   @include angular-material-theme($app-theme);

You can customize individual components or create multiple themes like dark and light variants.

3. **Component Composition**: Angular applications mostly consist of components, and effective component composition is crucial for a maintainable codebase. Some best practices are:

- **Smart and Dumb Components**: Design components with either the goal of handling data (smart) or only displaying data (dumb). Smart components manage state, while dumb components are stateless and receive input data through properties.

- **Content Projection**: Use ‘ng-content‘ to insert content within a component. This allows better reusability and modularity. For example, a card component:

     <!-- card.component.html -->
     <div class="card">
       <ng-content select="[header]"></ng-content>
       <ng-content select="[body]"></ng-content>
       <ng-content select="[footer]"></ng-content>
     </div>

Using the card component:

     <app-card>
       <div header>Header Content</div>
       <div body>Body Content</div>
       <div footer>Footer Content</div>
     </app-card>

4. **State management with NgRx**: Angular has services to manage shared state, but large applications might require more robust solutions. NgRx is a popular library for state management, leveraging reactive programming with RxJS. NgRx enforces separation of concerns and a clear unidirectional data flow by using actions, reducers, effects, and selectors. This improves code maintainability and simplifies managing complex state and async operations.

Install NgRx and dependencies:

npm install @ngrx/store @ngrx/effects @ngrx/entity @ngrx/store-devtools

Create actions, reducers, effects, and selectors to manage state effectively and predictably.

These techniques combined will help you handle UI state and layout in Angular applications more efficiently, leading to modular, maintainable, and responsive user experiences.