Skip to content

Instantly share code, notes, and snippets.

import { BrowserModule } from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { LoginComponent } from './login/login.component';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { CallbackComponent } from './callback/callback.component';
import {LazyElementsModule} from '@angular-extensions/elements';
import {Component, Input, OnChanges, OnDestroy, OnInit, SimpleChange} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges, OnDestroy {
title = 'phoenix-wc-wiki-ngx-lt';
sendCustomEvent() {
const data = {
name: 'DataSentThoughtCustomEvent'
};
const event = new CustomEvent('phoenix-wc-wiki-ngx-ce-data-sent-test', { detail: data });
window.dispatchEvent(event);
}
<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
<img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
<li>
import {Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnChanges {
title = 'phoenix-wc-wiki-ngx-lt';
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Angular Web Component Elements</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Angular Web Component Elements</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
import { BrowserModule } from '@angular/platform-browser';
import {DoBootstrap, Injector, NgModule} from '@angular/core';
import { AppComponent } from './app.component';
import {createCustomElement} from '@angular/elements';
@NgModule({
declarations: [
AppComponent
],