Generating an Angular Web Component

Image by sandid from Pixabay

Scenario

We want to generate the web componentfs-gist with ViewEncapsulation.Native and inline styling and templating.

Approach

ng g c fs-gist --inline-style --inline-template -v ShadowDom

This will produce:

fs-gist.component.ts

It will look like this:

import { Component, OnInit, ViewEncapsulation } from '@angular/core';@Component({
selector: 'fs-gist',
template: `<p>fs-gist works!</p>`,
styles: [],
encapsulation: ViewEncapsulation.ShadowDom
})
export class FsGistComponent implements OnInit {
constructor() { }
ngOnInit(): void {}
}

Related

Founder of Firefly Semantics Corporation

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Why JavaScript Call Stack Comes into picture?

Javascript Object Enum with Switch

Important note for JavaScript developer

React Native For Web: Merging the worlds of mobile and web

Leveraging a DialogFlow(API.AI) Agent in an Angular 4 App

Different ways to handle HTTP requests inside a React Application

Adventures with Content Delivery (mostly CloudFront) Optimizations

What if… hosting sources, website and database on GitHub

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ole Ersoy

Ole Ersoy

Founder of Firefly Semantics Corporation

More from Medium

Quick styling, Bootstrap 5 final and Angular 13

Angular 13: Server Side Form Validations in Ant Design

Advice Generator App(Frontend Mentor)

Exploring Bootstrap 5 with Angular — Creating Dropdown