Advanced Angular elements web components tutorial with angular 7/6

Показать описание

In this advanced angular6/7 elements web components tutorial, I have demonstrated how to convert your existing angular component to a advanced standard javascript based web components using angular element ( used angular-cli and es6).

====================================================

=====================================================

Рекомендации по теме

Комментарии

Thanks for watching everyone!! Please add your comment how much you like this video. You can also recommend some subject for the next video to me.

BlackBoxTech

Thanks for sharing. Try to make video without any background music.

sqlguruji

Thanks for this excellent video. The web components I have been creating using the techniques you outlined work great inside vanilla html files.

I have been struggling to figure out how to import my web components into a new angular app. It would be very useful to port complete web components into new angular projects.

Do you mind creating a video demonstrating how to import this web component you created inside a new Angular 8 project?

NormGlomski

Thanks for sharing. Try to make video without any background music. With background music I was feeling like learning angular in cooking style.

pushkarrathod

Hey, nice video, I'll say at 00:28 when showing text, change the background color to black, it will look better.

ShubhamAkolkarx

I was getting a blank page because it wasn't building correctly. Fix, tsconfig.json in the compilerOptions should bet set as "target": "es2015". Also make sure your index.html is set to <app-weather> if you been skipping around the video like me. Check with ng server first.

vd

Hey Kalyan, Thanks for the video. Can you please integrate two components created from separate angular applications inside a single HTML page. I tried to create two apps (widget1, widget2) and running into issues when referencing from outside apps in a index.html - Errors regarding duplicate dependencies. One component is always working fine. Thanks

charanbabukarnam

Can we add routing inside the angular element?

no_one

thanks for the video. Can you build an angular app and elements from the same project? I'm thinking not.

rygartube

Can you explain why we need to set target to es2015 ???

connectramprakash

I got the response from api URL but my code doesn't work, the page is blank.I have followed every step you demonstrated but have not luck.

santunu

For people whose page is blank please check your paths of weathercard.js
Once i put the absolute path things started working
originally i put -- > <script type="text/javascript" </script> ( as shown in the video)(result : blank page)
later i put -- > <script type="text/javascript" </script> ( result : worked)
I cloned the author's repo thus the above path. So first clone his repo and use the above line index.html that is generated after the build command

Here is the entire index.html code which is working
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8">
<title>Weathercard</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet"
<body>
<app-weather unit="metric"
</body>
<script type="text/javascript" </script>
</html>

nirajchowdhary

While generating the html can we automate to remove the correct names of the script file and remove the main.js files as well? Then it becomes a one step process.

pansoftpro

good video, just please for the future, remove music, its annoying and distracting. Thanks

stefanoslalic

Hi, first thanks for video.
Your example works fine, but I have problem with call a method of component from HTML, also see my test:
Component:
@Input() location: string;
public options: any = { isOpen: true };

toggle() {
this.options.isOpen = !this.options.isOpen;
}

@Input() log() {
console.log("location", this.location) // Atlanta
console.log("togglee", this.toggle) // undefined
console.log("options", this.options) // undefined
}
HTML:
<app-weather unit="metric"
<script
<script>

</script>.
So, my goal is to pass some options as object on init.

ferhadothman

Can you show how to pass input parameter to angular element ? And how to handle any event in element ?

pushkarrathod

Hey brother, music is distracting... :)

vaibsify

not working on angular 7 at current time

kamalsahmoud

background music is annoying. Content was good though.

kunalpuri

Advanced Angular elements web components tutorial with angular 7/6

Advanced Angular elements web components tutorial with angular 7/6

Advanced Angular Elements

Angular & Web Components - Using Angular Elements to create Custom Elements

Angular Elements Make The Best React Components | Brad McAlister & Ryan Chenkie

Web Components with Angular Elements: Beyond the Basics | Manfred Steyer

Advanced Angular Elements - Michael Madsen

Standalone Components with Angular Elements to generate Web Components

Angular Web Components by Ivan Mitrić

Angular elements in Angular 10 for creating Web Components

Angular Elements Quick Start

Building Web Components using Angular Elements by Naman Sancheti

The best way to lazy load Angular Elements or any other web components in your Angular application!

Angular Elements Introduction & Walkthrough

A Deep Look At Angular Elements | Manfred Steyer

The best way to lazy load Angular Elements or any other web components in your Angular application!

Micro Frontend in Angular using Angular Elements | Micro Frontend

Web Components with Angular Elements: Beyond the Basics | Manfred Steyer | ng-conf 2019 Minified

Angular Element - Build your web component from scratch (in the simple way)

Angular Elements

WebComponents com Angular usando @angular/elements - Parte 1

Building reusable Web components with Angular by Sherry List

Using Web Components in Angular - Web Component Essentials

Web Components in Angular World - Webinar | WalkingTree Technologies

Dynamic Component in Angular (2024)