Wróć do strony głównej

Angular Elements

Czym jest Angular Elements? Jest to biblioteka, dzięki której możemy wykorzystać komponenty poza kodem Angular. W takim przypadku team frontend React może dodać feature do swojej aplikacji napisany w Angular.

Tworząc elementy korzystamy z technologii Web Components. Pozwala ona stworzyć niestandardowy tag HTML, który możemy wykorzystać wielokrotnie w kodzie. Logika w nim zawarta nie jest związana z resztą kodu.

Stworzenie elementu za pomocą API Angular

Na początek stwórzmy nasz projekt, za pomocą Angular CLI.

Dodajmy Angular Elements.

Oraz utwórzmy przykładowy komponent.

Gdy mamy już gotowy projekt możemy dodać nasz element.

Elementy tworzymy za pomocą metody createCustomElement(). Aby jej użyć, należy ją dodać w głównym module aplikacji.

W powyższym przykładzie użyliśmy komponentu TestComponent. Następnie zdefiniowaliśmy go jako web element <test-component>.

Komponent stał się dynamiczny, dlatego możemy go użyć w kodzie za pomocą prostego kodu JS.

Prawdopodobnie kod może nam nie zadziałać. I w konsoli otrzymamy błąd.

Failed to construct ‚HTMLElement’: Please use the ‚new’ operator, this DOM object constructor cannot be called as a function.

W takim przypadku potrzebujemy wsparcia dla przeglądarki. Należy doinstalować paczkę @webcomponents/webcomponentsjs

A następnie zaimportować ją w pliku polyfills.ts

Teraz wszystko powinno działać.

Komunikacja z komponentem za pomocą Input() i Output()

Stwórzmy komponent, który będzie nam wyświetlał listę User. Poprzez Input() przekażemy tablicę User a poprzez Output() wyemitujemy wybór konkretnego User.

Dobrą praktyką jest nazywanie Input() i Output() małymi literami. Lepiej nazwać userlist zamiast userList. W przypadku dodawania elementu do strony HTML nie będziemy mieli problemu, natomiast gdy dodamy do aplikacji React, może nam nie zadziałać.

Kolejną rzeczą jest potraktowanie Input() jako string. Gdy będziemy dodawać elementy do innych aplikacji dane takie jak obiekt lub array mogą być niepoprawnie obsłużone. Aplikacje zamiast serializować dane będą używały funkcji toString(). Dlatego dla userslist ustawiony jest setter, który zamienia JSON lub przypisuje array User do property list. Następnie property list jest listowane w widoku.

Za pomocą kodu JS możemy dodać Input() do naszego elementu. Należy odwołać się do elementu HTML, a następnie do atrybutu userslist.

Aby poprawnie obsłużyć Output() dla elementu, należy dodać EventListener.

Build elementu do wykorzystania w innych aplikacjach

Aplikacja tworząca build nie będzie posiadała AppComponent ani bootstrap z NgModule. Są one niepotrzebne. W tym momencie nie mamy żadnego komponentu odpowiadającego za root aplikacji oraz nasza aplikacja nie potrzebuje żadnego komponentu do wystartowania.

W powyższym przykładnie dodałem funkcję ngDoBootstrap(). Jako że nie mamy zdefiniowanego żadnego elementu do startu aplikacji, ta funkcja informuje, żeby aplikacja wystartowała.

Tworzymy produkcyjny build bez trybu cache.

Komenda w folderze dist/angular-elements-example stworzyła nam 3 pliki: main.js, polyfills.js oraz runtime.js. Należy je połączyć w jeden w celu prostszego dodania na stronę. Stwórzmy folder demo i za pomocą polecenia połączmy 3 pliki w 1.

Posiadamy teraz gotowy plik angular-elements-example.js który możemy dodać na stronę.

Przykład z wykonaniem build umieściłem na GitHub.

Dodanie elementu do strony HTML

Taki element możemy z łatwością zaimportować na prostą stronę html. Do pliku index.html należy dodać skrypt angular-elements-example.js

Tutaj mamy 2 możliwości implementacji. Możemy dodać nasz element dynamicznie lub statycznie. W obydwu przypadkach możliwa jest obsługa Input() i Output().

W przypadku dodawania statycznego przekazuje JSON array.

Podany przykład z użyciem strony HTML możemy zobaczyć na stackblitz.

Dodanie elementu do aplikacji React

Podobnie jak przy dodawaniu do prostej strony HTML, należy dodać plik JS z naszym elementem. W tym celu w projekcie React dodajemy go do katalogu src i implementujemy go w pliku index.js.

Dane przekazywane w Input() zamienimy na JSON. Tak jak wspomniałem wyżej React zamiast serializować dane używa metody toString().

Obsługa Output() elementu odbywa się za pomocą addEventListener. W komponencie React po jego usunięciu należy usunąć EventListener.

Podany przykład z użyciem React możemy zobaczyć na stackblitz.

Dodanie elementu do aplikacji Vue

Przy dodawaniu elementu do komponentu w Vue posłużymy się takimi samymi zasadami jak w przypadku React. Tablicę User zamienimy na JSON.

W przypadku obsługi Output() funkcja zwróci nam CustomEvent. W celu uzyskania informacji należy odwołać się do detail.

Podany przykład z użyciem Vue możemy zobaczyć na stackblitz.

Podsumowanie

Angular Elements jest świetnym narzędziem, jeśli chcemy udostępnić kawałki kodu Angular. Możemy je wykorzystać w mikroserwisach czy też komponentach UI. Uważam, że warto zapoznać się z tą technologią. Jak tam wasze wrażenia z Web Components? Używacie w projektach? Dajcie znać w komentarzu 😉

O autorze

Łukasz Kumiec

Na co dzień programista i pasjonat technologii Angular i RxJS. Po godzinach fan sportów walki, podróżowania i motoryzacji.

Chcesz razem z nami tworzyć treści na bloga? Dołącz do nas i twórz wartościowe treści dla sympatyków Angulara z Angular.love!

2 komentarzy

  1. Avatar Arkadiusz

    Świetny artykuł jasno, czytelnie i precyzyjnie.

    Zabrakło mi jedynie wzmianki co do wagi takiej paczki? To pierwsze co nasunęło mi się na myśl ponieważ angular jest dość ciężki. A jak ma się to do takowej paczki?

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *