Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Content Projection and Its Type in Angular4 Application

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 573
    Comment on it

    Projecting content(insertion of HTML elements or other components) in a component is Content Projection. In Angular, it can be achieved via <ng-content></ng-content> directive. Shadow DOM can be inserted in a component via Content Projection. It allows to create reusable components and can make application scalable if used properly.

     

     

    Why Content Projection?

    To understand concept of Content Projection, consider an example:-

    There are two Angular Components Parent Component named (AppComponent) and Child component named (StudentComponent)

     

    AppComponent

    import { Component } from '@angular/core';
    @Component({
        selector: 'app-root',
        templateUrl: 'app/app.component.html'
    })
    export class AppComponent {
    
    	stdMsg: string = "Hello Student !"
    }

     

     

    app.component.html

    <app-student [studentMsg]="stdMsg"></app-student>

     

    StudentComponent

    import { Component,OnInit } from '@angular/core';
    @Component({
        selector: 'app-student',
        template: `{{studentMsg}}`
    })
    export class StudentComponent implements OnInit {
    
    	@Input() studentMsg: string;
    	
    	constructor() { }
    
    	 ngOnInit() {
      }
    }

     


    For passing a message from parent component to child component @Input decorator containing the text is used. Therefore, @Input decorator allows one-way communication from parent to child. But what if one wants to provide various type of data such as styled HTML, HTML elements,  Inner HTML etc then @Input decorator can become messy to use, in such situation content projection comes into the picture. By default components, support content projection and ngContent directive can be used for placing projected content in the template.

     

    Single Slot Content Projection

    For using content projection parent and child component can be as follows :-

     

    AppComponent

    import { Component } from '@angular/core';
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html'
    })
    export class AppComponent {
    
    }
    

     

    StudentComponent

    import { Component,OnInit } from '@angular/core';
    @Component({
        selector: 'app-student',
        template: `<div><h2>Student as child component</h2><ng-content></ng-content></div>`
    })
    export class StudentComponent implements OnInit {
    	
    	constructor() { }
    
    	 ngOnInit() {
      }
    }

     

    Now when StudentComponent is used by AppComponent, content can be projected as follows :-

     

    app.component.html

    <app-student>
       <p style="color:blue">This is the <i>projected</i> content from parent component.</p>
    </app-student>

     

    Output :-

    In above code anything that is placed inside <app-student>  selector  will be placed inside of <ng-content></ng-content> in child component. The child component does not know what is being projected. Therefore, there can be another component, markup etc projected here. 

     

    Multiple Slot Content Projection

    There can be multiple <ng-content></ng-content> directive in a component. To specify the position of the projected content to certain ng-content, ng-content selectors are used. There are four types of selectors for projection :-

     

    •  Tag Selector Projection.
    •  Class Selector Projection
    •  Id Selector Projection
    •  Attribute Selector Projection

     

    Example of Multiple Slot Content Projection - Tag Selector Projection

     

    Note: AppComponent remains same

     

    StudentComponent

    import { Component,OnInit  } from '@angular/core';
    @Component({
        selector: 'app-student',
        template: `app/student/student.component.html`
    })
    export class StudentComponent implements OnInit {
    	
    	constructor() { }
    
    	 ngOnInit() {
      }
    }

     

    student.component.html

    <div class="container">
      <h4>Child Component with tag selector</h4>
      <ng-content select="header"></ng-content> 
      <ng-content select="h1"></ng-content> 
      <ng-content select="footer"></ng-content>
    </div>

     

     

    app.component.html

    <app-student>
      <header><p style="color:blue">This is the <i>projected</i> content from parent component for header tag.</p></header>
      <h1 style="color:crimson">This is the <i>projected</i> content from parent component for h1 tag.</h1>
      <footer><p style="color:brown">This is the <i>projected</i> content from parent component for footer tag.</p></footer>
    </app-student>

     

    Output :-

     

     


    The problem with tag selectors arises when all of e.g h1 elements will get projected to the StudentComponent at the same place. There are many scenarios when this is not desirable in such cases Class, Id and attribute selector can be used.

     

    Example :-

    AppComponent and StudentComponent remains same

     

    student.component.html

    <div class="container">
      <h4>Child Component with Class and Attribute Selector</h4>
      <ng-content select=".classselect"></ng-content> <!--  Class Selector Projection -->
      <ng-content select="[btnselect]"></ng-content> <!-- Attribute Selector Projection -->
    </div>

     

    app.component.html

    <app-student>
      <h1 class="classselect">This is the <i>projected</i> content from parent component for class selector.</h1> <!--   Content for class selector -->
      <button btnselect class="btn btn-info">Click Here</button>  <!--   Content for attribute selector -->
      <button>Not displayed</button> <!--   Contains no selector therefore not displayed -->
    </app-student>

     

    Output :-

     

     

     

    Content Projection and Its Type in Angular4 Application

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: