For directive

The [bsFor] directive links a <label> to its associated input via a template reference, so clicks on the label focus the target control without needing a hand-maintained for/id pair.

Basic usage

  
    
      
        <bs-form>
        
    
      
          <bs-grid>
        
    
      
            <div bsRow class="mb-3">
        
    
      
              <label [md]="4" bsColFormLabel [bsFor]="firstName">First name</label>
        
    
      
              <div [md]="8">
        
    
      
                <input type="text" #firstName>
        
    
      
              </div>
        
    
      
            </div>
        
    
      
          </bs-grid>
        
    
      
        </bs-form>

  
    
      
        import { Component } from '@angular/core';
        
    
      
        import { BsForDirective } from '@mintplayer/ng-bootstrap/for';
        
    
      
        import { BsFormComponent } from '@mintplayer/ng-bootstrap/form';
        
    
      
        import {
        
    
      
          BsGridComponent,
        
    
      
          BsGridRowDirective,
        
    
      
          BsColFormLabelDirective,
        
    
      
        } from '@mintplayer/ng-bootstrap/grid';
        
    
      
        
        
    
      
        @Component({
        
    
      
          selector: 'my-for-demo',
        
    
      
          templateUrl: './my-for-demo.component.html',
        
    
      
          imports: [
        
    
      
            BsForDirective,
        
    
      
            BsFormComponent,
        
    
      
            BsGridComponent,
        
    
      
            BsGridRowDirective,
        
    
      
            BsColFormLabelDirective,
        
    
      
          ],
        
    
      
        })
        
    
      
        export class MyForDemoComponent {}