Christa  Stehr

Christa Stehr

1602825660

CodePipeline for Serverless Applications With CloudFormation Templates

Introduction

The CI/CD process of an application is crucial to its success and having an easy way to maintain said process can lead to an even healthier lifecycle for the application. Enter infrastructure as code: a reliable method of managing and provisioning pretty much anything you would need in a CI/CD pipeline to get it going, through the use of templates and definitions. Ever needed to keep the configurations of an AWS pipeline somewhere so you don’t need to remember the clicks from the Management Console by heart? Or maybe you wanted to give a working example to a colleague, so they can build their own pipeline. These problems and many more can be solved through infrastructure as code and CloudFormation, if we’re talking AWS.

In the following lines, we’ll go through everything you need to create your own pipeline, connect it with other pipelines and maintain them only by running a not that complicated bash script. And by the end, you’ll probably come to realize yourself how awesome infrastructure as code is (no need to thank us).

Table of contents

  1. Simple Codepipeline using CloudFormation, The Serverless Framework, and IAM Roles
  2. Complex Codepipeline(s) with AWS Templates and Nested Stacks
  3. Automation through scripting

Just want to see the code? Here you go:

  1. Simple pipeline CodeFormation template
  2. The Serverless Framework catch
  3. Template with nested stacks
  4. Automating template packaging/deployment through scripting

CodePipeline using Cloudformation

Building a pipline in AWS’s CodePipeline is pretty simple and conceptually similar to other CI\CD tools out there, but it’s also quite verbose, requiring a considerable amount of code, especially if you want to build your pipeline in an infrastructure-as-code approach.

From a high level there’s 5 main types of resources we need in order for us to put together an AWS Codepipeline:

  1. **A S3 bucket **resource— where our code artifact will be stored
  2. A CodePipeline resource— this will model what steps and actions our CodePipeline will include and execute
  3. IAM Roles — one role that CodePipeline will assume during its execution, in order to create/update/deploy the resources in our codebase. A second role used by a CodeCommit webhook(see #5).
  4. CodeBuild Project(s) — are used by the CodePipeline resource to execute the actual commands we want in our pipeline.
  5. An Event Rule — an AWS Event Rule that will act as a webhook triggering the pipeline on each master branch change(this is only required when working with CodeCommit. If you use Github or other supported repo provider there are build-in webhooks)

Now we’ll go over each of the resource types and then we’ll put it all together in a complete CodePipeline.yml definition for a serverless application built on AWS Lambdas using the Serverless Framework(but not limited to these).

#cloudformation #the-serverless-framework #aws-cloudformation #aws-codepipeline #codepipeline

What is GEEK

Buddha Community

CodePipeline for Serverless Applications With CloudFormation Templates
Christa  Stehr

Christa Stehr

1602825660

CodePipeline for Serverless Applications With CloudFormation Templates

Introduction

The CI/CD process of an application is crucial to its success and having an easy way to maintain said process can lead to an even healthier lifecycle for the application. Enter infrastructure as code: a reliable method of managing and provisioning pretty much anything you would need in a CI/CD pipeline to get it going, through the use of templates and definitions. Ever needed to keep the configurations of an AWS pipeline somewhere so you don’t need to remember the clicks from the Management Console by heart? Or maybe you wanted to give a working example to a colleague, so they can build their own pipeline. These problems and many more can be solved through infrastructure as code and CloudFormation, if we’re talking AWS.

In the following lines, we’ll go through everything you need to create your own pipeline, connect it with other pipelines and maintain them only by running a not that complicated bash script. And by the end, you’ll probably come to realize yourself how awesome infrastructure as code is (no need to thank us).

Table of contents

  1. Simple Codepipeline using CloudFormation, The Serverless Framework, and IAM Roles
  2. Complex Codepipeline(s) with AWS Templates and Nested Stacks
  3. Automation through scripting

Just want to see the code? Here you go:

  1. Simple pipeline CodeFormation template
  2. The Serverless Framework catch
  3. Template with nested stacks
  4. Automating template packaging/deployment through scripting

CodePipeline using Cloudformation

Building a pipline in AWS’s CodePipeline is pretty simple and conceptually similar to other CI\CD tools out there, but it’s also quite verbose, requiring a considerable amount of code, especially if you want to build your pipeline in an infrastructure-as-code approach.

From a high level there’s 5 main types of resources we need in order for us to put together an AWS Codepipeline:

  1. **A S3 bucket **resource— where our code artifact will be stored
  2. A CodePipeline resource— this will model what steps and actions our CodePipeline will include and execute
  3. IAM Roles — one role that CodePipeline will assume during its execution, in order to create/update/deploy the resources in our codebase. A second role used by a CodeCommit webhook(see #5).
  4. CodeBuild Project(s) — are used by the CodePipeline resource to execute the actual commands we want in our pipeline.
  5. An Event Rule — an AWS Event Rule that will act as a webhook triggering the pipeline on each master branch change(this is only required when working with CodeCommit. If you use Github or other supported repo provider there are build-in webhooks)

Now we’ll go over each of the resource types and then we’ll put it all together in a complete CodePipeline.yml definition for a serverless application built on AWS Lambdas using the Serverless Framework(but not limited to these).

#cloudformation #the-serverless-framework #aws-cloudformation #aws-codepipeline #codepipeline

Serverless Applications - Pros and Cons to Help Businesses Decide - Prismetric

In the past few years, especially after Amazon Web Services (AWS) introduced its Lambda platform, serverless architecture became the business realm’s buzzword. The increasing popularity of serverless applications saw market leaders like Netflix, Airbnb, Nike, etc., adopting the serverless architecture to handle their backend functions better. Moreover, serverless architecture’s market size is expected to reach a whopping $9.17 billion by the year 2023.

Global_Serverless_Architecture_Market_2019-2023

Why use serverless computing?
As a business it is best to approach a professional mobile app development company to build apps that are deployed on various servers; nevertheless, businesses should understand that the benefits of the serverless applications lie in the possibility it promises ideal business implementations and not in the hype created by cloud vendors. With the serverless architecture, the developers can easily code arbitrary codes on-demand without worrying about the underlying hardware.

But as is the case with all game-changing trends, many businesses opt for serverless applications just for the sake of being up-to-date with their peers without thinking about the actual need of their business.

The serverless applications work well with stateless use cases, the cases which execute cleanly and give the next operation in a sequence. On the other hand, the serverless architecture is not fit for predictable applications where there is a lot of reading and writing in the backend system.

Another benefit of working with the serverless software architecture is that the third-party service provider will charge based on the total number of requests. As the number of requests increases, the charge is bound to increase, but then it will cost significantly less than a dedicated IT infrastructure.

Defining serverless software architecture
In serverless software architecture, the application logic is implemented in an environment where operating systems, servers, or virtual machines are not visible. Although where the application logic is executed is running on any operating system which uses physical servers. But the difference here is that managing the infrastructure is the soul of the service provider and the mobile app developer focuses only on writing the codes.

There are two different approaches when it comes to serverless applications. They are

Backend as a service (BaaS)
Function as a service (FaaS)

  1. Backend as a service (BaaS)
    The basic required functionality of the growing number of third party services is to provide server-side logic and maintain their internal state. This requirement has led to applications that do not have server-side logic or any application-specific logic. Thus they depend on third-party services for everything.

Moreover, other examples of third-party services are Autho, AWS Cognito (authentication as a service), Amazon Kinesis, Keen IO (analytics as a service), and many more.

  1. Function as a Service (FaaS)
    FaaS is the modern alternative to traditional architecture when the application still requires server-side logic. With Function as a Service, the developer can focus on implementing stateless functions triggered by events and can communicate efficiently with the external world.

FaaS serverless architecture is majorly used with microservices architecture as it renders everything to the organization. AWS Lambda, Google Cloud functions, etc., are some of the examples of FaaS implementation.

Pros of Serverless applications
There are specific ways in which serverless applications can redefine the way business is done in the modern age and has some distinct advantages over the traditional could platforms. Here are a few –

🔹 Highly Scalable
The flexible nature of the serverless architecture makes it ideal for scaling the applications. The serverless application’s benefit is that it allows the vendor to run each of the functions in separate containers, allowing optimizing them automatically and effectively. Moreover, unlike in the traditional cloud, one doesn’t need to purchase a certain number of resources in serverless applications and can be as flexible as possible.

🔹 Cost-Effective
As the organizations don’t need to spend hundreds and thousands of dollars on hardware, they don’t need to pay anything to the engineers to maintain the hardware. The serverless application’s pricing model is execution based as the organization is charged according to the executions they have made.

The company that uses the serverless applications is allotted a specific amount of time, and the pricing of the execution depends on the memory required. Different types of costs like presence detection, access authorization, image processing, etc., associated with a physical or virtual server is completely eliminated with the serverless applications.

🔹 Focuses on user experience
As the companies don’t always think about maintaining the servers, it allows them to focus on more productive things like developing and improving customer service features. A recent survey says that about 56% of the users are either using or planning to use the serverless applications in the coming six months.

Moreover, as the companies would save money with serverless apps as they don’t have to maintain any hardware system, it can be then utilized to enhance the level of customer service and features of the apps.

🔹 Ease of migration
It is easy to get started with serverless applications by porting individual features and operate them as on-demand events. For example, in a CMS, a video plugin requires transcoding video for different formats and bitrates. If the organization wished to do this with a WordPress server, it might not be a good fit as it would require resources dedicated to serving pages rather than encoding the video.

Moreover, the benefits of serverless applications can be used optimally to handle metadata encoding and creation. Similarly, serverless apps can be used in other plugins that are often prone to critical vulnerabilities.

Cons of serverless applications
Despite having some clear benefits, serverless applications are not specific for every single use case. We have listed the top things that an organization should keep in mind while opting for serverless applications.

🔹 Complete dependence on third-party vendor
In the realm of serverless applications, the third-party vendor is the king, and the organizations have no options but to play according to their rules. For example, if an application is set in Lambda, it is not easy to port it into Azure. The same is the case for coding languages. In present times, only Python developers and Node.js developers have the luxury to choose between existing serverless options.

Therefore, if you are planning to consider serverless applications for your next project, make sure that your vendor has everything needed to complete the project.

🔹 Challenges in debugging with traditional tools
It isn’t easy to perform debugging, especially for large enterprise applications that include various individual functions. Serverless applications use traditional tools and thus provide no option to attach a debugger in the public cloud. The organization can either do the debugging process locally or use logging for the same purpose. In addition to this, the DevOps tools in the serverless application do not support the idea of quickly deploying small bits of codes into running applications.

#serverless-application #serverless #serverless-computing #serverless-architeture #serverless-application-prosand-cons

Hermann  Frami

Hermann Frami

1655426640

Serverless Plugin for Microservice Code Management and Deployment

Serverless M

Serverless M (or Serverless Modular) is a plugin for the serverless framework. This plugins helps you in managing multiple serverless projects with a single serverless.yml file. This plugin gives you a super charged CLI options that you can use to create new features, build them in a single file and deploy them all in parallel

splash.gif

Currently this plugin is tested for the below stack only

  • AWS
  • NodeJS λ
  • Rest API (You can use other events as well)

Prerequisites

Make sure you have the serverless CLI installed

# Install serverless globally
$ npm install serverless -g

Getting Started

To start the serverless modular project locally you can either start with es5 or es6 templates or add it as a plugin

ES6 Template install

# Step 1. Download the template
$ sls create --template-url https://github.com/aa2kb/serverless-modular/tree/master/template/modular-es6 --path myModularService

# Step 2. Change directory
$ cd myModularService

# Step 3. Create a package.json file
$ npm init

# Step 3. Install dependencies
$ npm i serverless-modular serverless-webpack webpack --save-dev

ES5 Template install

# Step 1. Download the template
$ sls create --template-url https://github.com/aa2kb/serverless-modular/tree/master/template/modular-es5 --path myModularService

# Step 2. Change directory
$ cd myModularService

# Step 3. Create a package.json file
$ npm init

# Step 3. Install dependencies
$ npm i serverless-modular --save-dev

If you dont want to use the templates above you can just add in your existing project

Adding it as plugin

plugins:
  - serverless-modular

Now you are all done to start building your serverless modular functions

API Reference

The serverless CLI can be accessed by

# Serverless Modular CLI
$ serverless modular

# shorthand
$ sls m

Serverless Modular CLI is based on 4 main commands

  • sls m init
  • sls m feature
  • sls m function
  • sls m build
  • sls m deploy

init command

sls m init

The serverless init command helps in creating a basic .gitignore that is useful for serverless modular.

The basic .gitignore for serverless modular looks like this

#node_modules
node_modules

#sm main functions
sm.functions.yml

#serverless file generated by build
src/**/serverless.yml

#main serverless directories generated for sls deploy
.serverless

#feature serverless directories generated sls deploy
src/**/.serverless

#serverless logs file generated for main sls deploy
.sm.log

#serverless logs file generated for feature sls deploy
src/**/.sm.log

#Webpack config copied in each feature
src/**/webpack.config.js

feature command

The feature command helps in building new features for your project

options (feature Command)

This command comes with three options

--name: Specify the name you want for your feature

--remove: set value to true if you want to remove the feature

--basePath: Specify the basepath you want for your feature, this base path should be unique for all features. helps in running offline with offline plugin and for API Gateway

optionsshortcutrequiredvaluesdefault value
--name-nstringN/A
--remove-rtrue, falsefalse
--basePath-pstringsame as name

Examples (feature Command)

Creating a basic feature

# Creating a jedi feature
$ sls m feature -n jedi

Creating a feature with different base path

# A feature with different base path
$ sls m feature -n jedi -p tatooine

Deleting a feature

# Anakin is going to delete the jedi feature
$ sls m feature -n jedi -r true

function command

The function command helps in adding new function to a feature

options (function Command)

This command comes with four options

--name: Specify the name you want for your function

--feature: Specify the name of the existing feature

--path: Specify the path for HTTP endpoint helps in running offline with offline plugin and for API Gateway

--method: Specify the path for HTTP method helps in running offline with offline plugin and for API Gateway

optionsshortcutrequiredvaluesdefault value
--name-nstringN/A
--feature-fstringN/A
--path-pstringsame as name
--method-mstring'GET'

Examples (function Command)

Creating a basic function

# Creating a cloak function for jedi feature
$ sls m function -n cloak -f jedi

Creating a basic function with different path and method

# Creating a cloak function for jedi feature with custom path and HTTP method
$ sls m function -n cloak -f jedi -p powers -m POST

build command

The build command helps in building the project for local or global scope

options (build Command)

This command comes with four options

--scope: Specify the scope of the build, use this with "--feature" tag

--feature: Specify the name of the existing feature you want to build

optionsshortcutrequiredvaluesdefault value
--scope-sstringlocal
--feature-fstringN/A

Saving build Config in serverless.yml

You can also save config in serverless.yml file

custom:
  smConfig:
    build:
      scope: local

Examples (build Command)

all feature build (local scope)

# Building all local features
$ sls m build

Single feature build (local scope)

# Building a single feature
$ sls m build -f jedi -s local

All features build global scope

# Building all features with global scope
$ sls m build -s global

deploy command

The deploy command helps in deploying serverless projects to AWS (it uses sls deploy command)

options (deploy Command)

This command comes with four options

--sm-parallel: Specify if you want to deploy parallel (will only run in parallel when doing multiple deployments)

--sm-scope: Specify if you want to deploy local features or global

--sm-features: Specify the local features you want to deploy (comma separated if multiple)

optionsshortcutrequiredvaluesdefault value
--sm-paralleltrue, falsetrue
--sm-scopelocal, globallocal
--sm-featuresstringN/A
--sm-ignore-buildstringfalse

Saving deploy Config in serverless.yml

You can also save config in serverless.yml file

custom:
  smConfig:
    deploy:
      scope: local
      parallel: true
      ignoreBuild: true

Examples (deploy Command)

Deploy all features locally

# deploy all local features
$ sls m deploy

Deploy all features globally

# deploy all global features
$ sls m deploy --sm-scope global

Deploy single feature

# deploy all global features
$ sls m deploy --sm-features jedi

Deploy Multiple features

# deploy all global features
$ sls m deploy --sm-features jedi,sith,dark_side

Deploy Multiple features in sequence

# deploy all global features
$ sls m deploy  --sm-features jedi,sith,dark_side --sm-parallel false

Author: aa2kb
Source Code: https://github.com/aa2kb/serverless-modular 
License: MIT license

#serverless #aws #node #lambda 

Christa  Stehr

Christa Stehr

1602681082

Overcoming Common Serverless Challenges with Mainframe CICS Programs

By this point most enterprises, including those running on legacy infrastructures, are familiar with the benefits of serverless computing:

  • Greater scalability
  • Faster development
  • More efficient deployment
  • Lower cost

The benefits of agility and cost reduction are especially relevant in the current macroeconomic environment when customer behavior is changing, end-user needs are difficult to predict, and development teams are under pressure to do more with less.

So serverless is a no-brainer, right?

Not exactly. Serverless might be relatively painless for a new generation of cloud-native software companies that grew up in a world of APIs and microservices, but it creates headaches for the many organizations that still rely heavily on legacy infrastructure.

In particular, enterprises running mainframe CICS programs are likely to encounter frustrating stumbling blocks on the path to launching Functions as a Service (FaaS). This population includes global enterprises that depend on CICS applications to effectively manage high-volume transactional processing requirements – particularly in the banking, financial services, and insurance industries.

These organizations stand to achieve time and cost savings through a modern approach to managing legacy infrastructure, as opposed to launching serverless applications on a brittle foundation. Here are three of the biggest obstacles they face and how to overcome them.

Challenge #1

Middleware that introduces complexity, technical debt, and latency. Many organizations looking to integrate CICS applications into a microservices or serverless architecture rely on middleware (e.g., an ESB or SOA) to access data from the underlying applications. This strategy introduces significant runtime performance challenges and creates what one bank’s chief architect referred to as a “lasagna architecture,” making DevOps impossible.

#serverless architecture #serverless functions #serverless benefits #mainframes #serverless api #serverless integration

Nico Jonsson

Nico Jonsson

1605576444

How to Use DOM Manipulation properly in Angular

If you are coming from the background of working with angularjs, it was quite straight forward to access and manipulate the DOM there. You had access to the DOM node through element injected in the link function of the directive.

function link(scope, element, attrs) {
}

Or through angular.element which was an AngularJS’s built in subset of jQuery. But this approach had its drawbacks. It made your code tightly coupled with Browser’s API.

The new Angular (2 onwards) works on multiple platforms: mobile, web workers etc. So, they have introduced a number of APIs to work as an abstraction layer between your code and platform APIs. These APIs come in the form of different reference types likeElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef.

In this blog, we will see some examples of how these reference types can be used to manipulate DOM in angular. But before that let’s look at the ways to access these reference types within a Component/Directive.

DOM Queries

Angular has provided two ways to query/access various reference types within a Component/Directive. These are

  • ViewChild/ViewChildren
  • ContentChild/ContentChildren

ViewChild/ViewChildren

These are decorators which can be used within a Component/Directive as @ViewChild (returns a single reference) or @ViewChildren (returns a list of references in the form of a QueryList). These will assign the values of reference types from template to the component fields they are applied to. The basic usage is as follow:

@ViewChild(selector, {read: ReferenceType}) fieldName;

A selector can be a string representing a template reference variable, or a Component/Directive class, or a TemplateRef or a provider defined in the child component tree.

@ViewChild("myElem") template: ElementRef;

The second parameter is optional and is only required to query some reference types which can’t be inferred easily by Angular like ViewContainerRef.

@ViewChild("myContainer", {read: ViewContainerRef}) container: ViewContainerRef;

ContentChild/ContentChildren

The usage is pretty much similar to that of ViewChild/ViewChildren. The only difference is that it queries within the <ng-content> projected elements of the component while the @ViewChild queries within the template of the component. This will be explained better in the examples of upcoming sections.

DOM access via ElementRef

ElementRef is a very basic abstraction layer on a DOM element in Angular. It’s an angular wrapper around the native element.

You can get hold of ElementRef in a Component or Directive in following ways:

Dependency Injection

Host element of a Component or Directive can be accessed via direct DI in the constructor.

@Component({
  selector: 'app-test',
  template: '<div>I am a test component</div>'
})
export class TestComponent implements OnInit {

  constructor(private element: ElementRef) { }

  ngOnInit() {
    console.log(this.element.nativeElement);
  }

}
/*
* Output: 
*   <app-test>
*     <div>I am a test component</div>
*   </app-test>
* */

Using ViewChild and Template Reference Variables

@Component({
  selector: 'app-test',
  template: `
    <div #child1>First Child</div>
    <div>Second Child</div>
  `
})
export class TestComponent implements OnInit {

  @ViewChild("child1") firstChild: ElementRef;

  constructor() { }

  ngOnInit() {
    console.log(this.firstChild.nativeElement);
  }

}

/*
* Output: <div>First Child</div>
* */

Using ContentChild

Works in a similar manner as that of @ViewChild, but for <ng-content> projected elements.

// Child Component
@Component({
  selector: "component-a",
  template: `<ng-content></ng-content>`
})
export class ComponentA {
  @ContentChild("contentChild") contentChild: ElementRef;
  
  ngOnInit() {
    console.log(this.contentChild.nativeElement);
  }
}
// Parent Component
@Component({
  selector: 'app-test',
  template: `
    <component-a>
      <div #contentChild>Content Child 1</div>
      <div>Content Child 2</div>
    </component-a>
  `
})
export class TestComponent implements OnInit {}
/*
* Output: <div>Content Child 1</div>
* */

It looks pretty straight forward that you can easily access a DOM element via ElementRef and then manipulate the DOM by accessing the nativeElement. Something like this:

@Component({
  selector: 'app-test-component',
  template: `
    <div class="header">I am a header</div>
    <div class="body" #body>
    </div>
    <div class="footer">I am a footer</div>
  `
})
export class TestComponent implements AfterContentInit {
  @ViewChild("body") bodyElem: ElementRef;

  ngAfterContentInit(): void {
    this.bodyElem.nativeElement.innerHTML = `<div>Hi, I am child added by directly calling the native APIs.</div>`;
  }

}

However, the direct usage of ElementRef is discouraged by Angular Team because it directly provides the access to DOM which can make your application vulnerable to XSS attacks. It also creates tight coupling between your application and rendering layers which makes is difficult to run an app on multiple platforms.

Everything is a ‘View’ in Angular

A view is the smallest building block of an angular app’s UI. Every component has its own view. You can consider it as a group of elements which can be created and destroyed together.

A view can be classified into two types:

  • Embedded Views — created from templates
  • Host Views — created from components

Displaying a view in UI can be broken down into two steps:

  1. Creating a view from template or component
  2. Rendering a view into a view container

Embedded Views

Embedded views are created from templates defined using <ng-template> element.

Creating an embedded view

First a template needs to be accessed within a component as TemplateRefusing @ViewChild and template reference variable. Then, an embedded view can be created from a TemplateRef by passing a data-binding context.

const viewRef = this.template.createEmbeddedView({
  name: "View 1"
});

This context is being consumed by the template in<ng-template>.

<ng-template #template let-viewName="name">
  <div>Hi, My name is {{viewName}}. I am a view created from a template</div>
</ng-template>

You can also use the $implicit property in the context if you have only a single property to bind.

const viewRef = this.template.createEmbeddedView({
  $implicit: "View 1"
});

In this case, you can skip assigning values to template variables.

<ng-template #template let-viewName>
  <div>Hi, My name is {{viewName}}. I am a view created from a template</div>
</ng-template>

Rendering an embedded view

Till now, we have created only an instance of ViewRef. This view is still not visible in the UI. In order to see it in the UI, we need a placeholder (a view container) to render it. This placeholder is being provided by ViewContainerRef.

Any element can serve as a view container, however <ng-container> is a better candidate as it is rendered as a comment and doesn’t leave any redundant element in the html DOM.

@Component({
  selector: 'app-test-component',
  template: `
    <div class="header">I am a header</div>
    <div class="body">
      <ng-container #container></ng-container>
    </div>
    <div class="footer">I am a footer</div>

    <ng-template #template let-viewName="name">
      <div>Hi, My name is {{viewName}}. I am a view created from a template</div>
    </ng-template>
  `,
})
export class TestComponent implements AfterContentInit {

  @ViewChild("template") template: TemplateRef;
  @ViewChild("container", {read: ViewContainerRef}) container: ViewContainerRef;

  constructor() { }

  ngAfterContentInit(): void {
    const viewRef = this.template.createEmbeddedView({
      name: "View 1"
    });
    this.container.insert(viewRef);
  }
}

Both <ng-container> and <ng-template> elements will be rendered as comments leaving the html DOM neat and clean.

The above 2 steps process of creating a view and adding it into a container can further be reduced by using the createEmbeddedView method available in the ViewContainerRef itself.

this.container.createEmbeddedView(this.template, {
  name: "View 1"
});

This can be further simplified by moving the whole view creation logic from component class to the template using ngTemplateOutlet and ngTemplateOutletContext.

@Component({
  selector: 'app-test-component',
  template: `
    <div class="header">I am a header</div>
    <div class="body">
      <ng-container [ngTemplateOutlet]="template" [ngTemplateOutletContext]="{name: 'View 1'}"></ng-container>
    </div>
    <div class="footer">I am a footer</div>

    <ng-template #template let-viewName="name">
      <div>Hi, My name is {{viewName}}. I am a view created from a template</div>
    </ng-template>
  `
})
export class TestComponent {}

Host Views

Host Views are quite similar to Embedded View. The only difference is that the Host Views are created from components instead of templates.

Creating a host view

In order to create a host view, first you need to create a ComponentFactory of the component you want to render using ComponentFactoryResolver.

constructor(
  private componentFactoryResolver: ComponentFactoryResolver
) {
  this.someComponentFactory = this.componentFactoryResolver.resolveComponentFactory(SomeComponent);
}

Then, a dynamic instance of the component is created by passing an Injector instance to the factory. Every component should be bound to an instance of Injector. You can use the injector of the parent component for the dynamically created components.

const componentRef = this.someComponentFactory.create(this.injector);
const viewRef = componentRef.hostView;

Rendering a host view

Rendering a host view is almost similar to rendering an embedded view. You can directly insert it into a view container.

@Component({
  selector: 'app-test-component',
  template: `
    <div class="header">I am a header</div>
    <div class="body">
      <ng-container #container></ng-container>
    </div>
    <div class="footer">I am a footer</div>
  `,
})
export class TestComponentComponent implements AfterContentInit {

  @ViewChild("container", {read: ViewContainerRef}) container: ViewContainerRef;

  private someComponentFactory: ComponentFactory<SomeComponent>;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private injector: Injector
  ) {
    this.someComponentFactory = this.componentFactoryResolver.resolveComponentFactory(SomeComponent);
  }

  ngAfterContentInit(): void {
    const componentRef = this.someComponentFactory.create(this.injector);
    const viewRef = componentRef.hostView;
    this.container.insert(viewRef);
  }
}

Or by directly calling the createComponent method of ViewContainerRef and passing the component factory instance.

this.container.createComponent(this.someComponentFactory);

Now, similar to embedded view, we can also shift the whole logic of host view creation in template itself using ngComponentOutlet.

@Component({
  selector: 'app-test-component',
  template: `
    <div class="header">I am a header</div>
    <div class="body">
      <ng-container [ngComponentOutlet]="comp"></ng-container>
    </div>
    <div class="footer">I am a footer</div>
  `
})
export class TestComponent {
  comp = SomeComponent;
}

Don’t forget to store the reference of the component class in parent component’s field. The template has access only to the fields of the components.

Summary

Here we come to an end. Let’s conclude what we have understood till now.

  • We can access the DOM in Angular using different reference types likeElementRef, TemplateRef, ViewRef, ComponentRef and ViewContainerRef.
  • These reference types can be queried from templates using @ViewChild and @ContentChild.
  • Browser’s native DOM element can be accessed via ElementRef. However, manipulating this element directly is discouraged because of security reasons.
  • Concept of Views.
  • How to create and render an Embedded View.
  • How to create and render a Component View.

So, that’s it for today about understanding DOM manipulation in Angular.

Originally published by medium