Creating a Custom Component Components Angular 12

############################# Video Source: www.youtube.com/watch?v=UwTMjTt8jME

In the last lecture you learned, what is a component and what do we use it for. In this lecture, you are going to create your own custom components. • Components are the basic building block of an angular application. Any angular app consists of different components combined together at the end. • Let's go ahead and let's create a header and a navbar for our angular application using components.","styleRuns":[{"startIndex":0,"length":395,"styleRunExtensions":{"styleRunColorMapExtension":{"colorMap":[{"key":"USER_INTERFACE_THEME_DARK","value":4294967295},{"key":"USER_INTERFACE_THEME_LIGHT","value":4279440147}]}},"fontFamilyName":"Roboto"}]},"headerRuns":[{"startIndex":0,"length":395,"headerMapping":"ATTRIBUTED_STRING_HEADER_MAPPING_UNSPECIFIED"}]}},{"itemSectionRenderer":{"contents":[{"continuationItemRenderer":{"trigger":"CONTINUATION_TRIGGER_ON_ITEM_SHOWN","continuationEndpoint":{"clickTrackingParams":"CMgBELsvGAIiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/next"}},"continuationCommand":{"token":"Eg0SC1V3VE1qVHQ4ak1FGAYyJSIRIgtVd1RNalR0OGpNRTAAeAJCEGNvbW1lbnRzLXNlY3Rpb24%3D","request":"CONTINUATION_REQUEST_TYPE_WATCH_NEXT"}}}}],"trackingParams":"CMgBELsvGAIiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","sectionIdentifier":"comment-item-section","targetId":"comments-section"}}],"trackingParams":"CMcBELovIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},"secondaryResults":{"secondaryResults":{"results":[{"compactVideoRenderer":{"videoId":"7iNAj4aU3ow","thumbnail":{"thumbnails":[{"url":"https://i.ytimg.com/vi/7iNAj4aU3ow/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG rs=AOn4CLDR3zpEvFQsrWLVL4BVTtsZ5O_-RQ","width":168,"height":94},{"url":"https://i.ytimg.com/vi/7iNAj4aU3ow/hqdefault.jpg?sqp=-oaymwEcCNACELwBSFXyq4qpAw4IARUAAIhCGAFwAcABBg== rs=AOn4CLD0KUBZ8D8yPjU089J0BJv-oBGolA","width":336,"height":188}]},"title":{"accessibility":{"accessibilityData":{"label":"Template property of Component | Components | Angular 12+ door procademy 48.089 weergaven 2 jaar geleden 6 minuten en 30 seconden"}},"simpleText":"Template property of Component | Components | Angular 12+"},"longBylineText":{"runs":[{"text":"procademy","navigationEndpoint":{"clickTrackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0yB3JlbGF0ZWQ=","commandMetadata":{"webCommandMetadata":{"url":"/@procademy","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UC5qYq6IWRqM2SYpIM_9Xp8A","canonicalBaseUrl":"/@procademy"}}}]},"publishedTimeText":{"simpleText":"2 jaar geleden"},"viewCountText":{"simpleText":"48.089 weergaven"},"lengthText":{"accessibility":{"accessibilityData":{"label":"6 minuten en 30 seconden"}},"simpleText":"6:30"},"navigationEndpoint":{"clickTrackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0yB3JlbGF0ZWRIwZny29ORs4JTmgEFCAEQ-B0=","commandMetadata":{"webCommandMetadata":{"url":"/watch?v=7iNAj4aU3ow","webPageType":"WEB_PAGE_TYPE_WATCH","rootVe":3832}},"watchEndpoint":{"videoId":"7iNAj4aU3ow","nofollow":true,"watchEndpointSupportedOnesieConfig":{"html5PlaybackOnesieConfig":{"commonConfig":{"url":"https://rr3---sn-5hne6nzk.googlevideo.com/initplayback?source=youtube oeis=1 c=WEB oad=3200 ovd=3200 oaad=11000 oavd=11000 ocs=700 oewis=1 oputc=1 ofpcc=1 msp=1 odepv=1 id=ee23408f8694de8c ip=5.34.180.98 initcwndbps=713750 mt=1731792571 oweuc="}}}}},"shortBylineText":{"runs":[{"text":"procademy","navigationEndpoint":{"clickTrackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0yB3JlbGF0ZWQ=","commandMetadata":{"webCommandMetadata":{"url":"/@procademy","webPageType":"WEB_PAGE_TYPE_CHANNEL","rootVe":3611,"apiUrl":"/youtubei/v1/browse"}},"browseEndpoint":{"browseId":"UC5qYq6IWRqM2SYpIM_9Xp8A","canonicalBaseUrl":"/@procademy"}}}]},"channelThumbnail":{"thumbnails":[{"url":"https://yt3.ggpht.com/4YeD27eopyviKvfF4wur6k4Yf6ZPLrbYnCi_LsBOa3vJOLzPvasZ8EhPQLpfi-2EzuIAMntLPw=s68-c-k-c0x00ffffff-no-rj","width":68,"height":68}]},"trackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN1AjL3TtPiR0JHuAQ==","shortViewCountText":{"accessibility":{"accessibilityData":{"label":"48 duizend weergaven"}},"simpleText":"48K weergaven"},"menu":{"menuRenderer":{"items":[{"menuServiceItemRenderer":{"text":{"runs":[{"text":"Toevoegen aan wachtrij"}]},"icon":{"iconType":"ADD_TO_QUEUE_TAIL"},"serviceEndpoint":{"clickTrackingParams":"CMUBEP6YBBgGIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true}},"signalServiceEndpoint":{"signal":"CLIENT_SIGNAL","actions":[{"clickTrackingParams":"CMUBEP6YBBgGIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","addToPlaylistCommand":{"openMiniplayer":false,"openListPanel":true,"videoId":"7iNAj4aU3ow","listType":"PLAYLIST_EDIT_LIST_TYPE_QUEUE","onCreateListCommand":{"clickTrackingParams":"CMUBEP6YBBgGIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/playlist/create"}},"createPlaylistServiceEndpoint":{"videoIds":["7iNAj4aU3ow"],"params":"CAQ%3D"}},"videoIds":["7iNAj4aU3ow"]}},{"clickTrackingParams":"CMUBEP6YBBgGIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","openPopupAction":{"popup":{"notificationActionRenderer":{"responseText":{"simpleText":"Toegevoegd aan wachtrij"},"trackingParams":"CMYBELlqIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},"popupType":"TOAST"}}]}},"trackingParams":"CMUBEP6YBBgGIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},{"menuServiceItemDownloadRenderer":{"serviceEndpoint":{"clickTrackingParams":"CMQBENGqBRgHIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","offlineVideoEndpoint":{"videoId":"7iNAj4aU3ow","onAddCommand":{"clickTrackingParams":"CMQBENGqBRgHIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","getDownloadActionCommand":{"videoId":"7iNAj4aU3ow","params":"CAIQAA%3D%3D"}}}},"trackingParams":"CMQBENGqBRgHIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},{"menuServiceItemRenderer":{"text":{"runs":[{"text":"Delen"}]},"icon":{"iconType":"SHARE"},"serviceEndpoint":{"clickTrackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/share/get_share_panel"}},"shareEntityServiceEndpoint":{"serializedShareEntity":"Cgs3aU5BajRhVTNvdw%3D%3D","commands":[{"clickTrackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","openPopupAction":{"popup":{"unifiedSharePanelRenderer":{"trackingParams":"CMMBEI5iIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","showLoadingSpinner":true}},"popupType":"DIALOG","beReused":true}}]}},"trackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","hasSeparator":true}}],"trackingParams":"CMABEKQwGAAiEwjFpq7r5-GJAxXwQnoFHSzpPN0=","accessibility":{"accessibilityData":{"label":"Actiemenu"}},"targetId":"watch-related-menu-button"}},"thumbnailOverlays":[{"thumbnailOverlayTimeStatusRenderer":{"text":{"accessibility":{"accessibilityData":{"label":"6 minuten en 30 seconden"}},"simpleText":"6:30"},"style":"DEFAULT"}},{"thumbnailOverlayToggleButtonRenderer":{"isToggled":false,"untoggledIcon":{"iconType":"WATCH_LATER"},"toggledIcon":{"iconType":"CHECK"},"untoggledTooltip":"Later bekijken","toggledTooltip":"Toegevoegd","untoggledServiceEndpoint":{"clickTrackingParams":"CMIBEPnnAxgBIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/browse/edit_playlist"}},"playlistEditEndpoint":{"playlistId":"WL","actions":[{"addedVideoId":"7iNAj4aU3ow","action":"ACTION_ADD_VIDEO"}]}},"toggledServiceEndpoint":{"clickTrackingParams":"CMIBEPnnAxgBIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/browse/edit_playlist"}},"playlistEditEndpoint":{"playlistId":"WL","actions":[{"action":"ACTION_REMOVE_VIDEO_BY_VIDEO_ID","removedVideoId":"7iNAj4aU3ow"}]}},"untoggledAccessibility":{"accessibilityData":{"label":"Later bekijken"}},"toggledAccessibility":{"accessibilityData":{"label":"Toegevoegd"}},"trackingParams":"CMIBEPnnAxgBIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},{"thumbnailOverlayToggleButtonRenderer":{"untoggledIcon":{"iconType":"ADD_TO_QUEUE_TAIL"},"toggledIcon":{"iconType":"PLAYLIST_ADD_CHECK"},"untoggledTooltip":"Toevoegen aan wachtrij","toggledTooltip":"Toegevoegd","untoggledServiceEndpoint":{"clickTrackingParams":"CMEBEMfsBBgCIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true}},"signalServiceEndpoint":{"signal":"CLIENT_SIGNAL","actions":[{"clickTrackingParams":"CMEBEMfsBBgCIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","addToPlaylistCommand":{"openMiniplayer":false,"openListPanel":true,"videoId":"7iNAj4aU3ow","listType":"PLAYLIST_EDIT_LIST_TYPE_QUEUE","onCreateListCommand":{"clickTrackingParams":"CMEBEMfsBBgCIhMIxaau6-fhiQMV8EJ6BR0s6Tzd","commandMetadata":{"webCommandMetadata":{"sendPost":true,"apiUrl":"/youtubei/v1/playlist/create"}},"createPlaylistServiceEndpoint":{"videoIds":["7iNAj4aU3ow"],"params":"CAQ%3D"}},"videoIds":["7iNAj4aU3ow"]}}]}},"untoggledAccessibility":{"accessibilityData":{"label":"Toevoegen aan wachtrij"}},"toggledAccessibility":{"accessibilityData":{"label":"Toegevoegd"}},"trackingParams":"CMEBEMfsBBgCIhMIxaau6-fhiQMV8EJ6BR0s6Tzd"}},{"thumbnailOverlayNowPlayingRenderer":{"text":{"runs":[{"text":"Wordt nu afgespeeld"}]}}}],"accessibility":{"accessibilityData":{"label":"Template property of Component | Components | Angular 12+ - 6 minuten en 30 seconden - Naar kanaal gaan - procademy - 48K weergaven - 2 jaar geleden - video afspelen"}},"richThumbnail":{"movingThumbnailRenderer":{"movingThumbnailDetails":{"thumbnails":[{"url":"https://i.ytimg.com/an_webp/7iNAj4aU3ow/mqdefault_6s.webp?du=3000 sqp=COzt47kG rs=AOn4CLBjJz0Qn2zSGmyoGA72PR52aj4Iiw","width":320,"height":180}],"logAsMovingThumbnail":true},"enableHoveredLogging":true,"enableOverlay":true}}}},{"lockupViewModel":{"contentImage":{"collectionThumbnailViewModel":{"primaryThumbnail":{"thumbnailViewModel":{"image":{"sources":[{"url":"https://i.ytimg.com/vi/NMzl2pGOK_8/hqdefault.jpg?sqp=-oaymwEWCKgBEF5IWvKriqkDCQgBFQAAiEIYAQ== rs=AOn4CLBvdmfl3sjhio_VoYM76uFeImrg8w","width":168,"height":94},{"url":"https://i.ytimg.com/vi/NMzl2pGOK_8/hqdefault.jpg?sqp=-oaymwEXCNACELwBSFryq4qpAwkIARUAAIhCGAE= rs=AOn4CLBvzKXFHWezRr6Sv7OoDviuJhBlnw","width":336,"height":188}]},"overlays":[{"thumbnailOverlayBadgeViewModel":{"thumbnailBadges":[{"thumbnailBadgeViewModel":{"icon":{"sources":[{"clientResource":{"imageName":"PLAYLISTS"}}]},"text":"105 video's","badgeStyle":"THUMBNAIL_OVERLAY_BADGE_STYLE_DEFAULT","backgroundColor":{"lightTheme":3344145,"darkTheme":3344145}}}],"position":"THUMBNAIL_OVERLAY_BADGE_POSITION_BOTTOM_END"}},{"thumbnailHoverOverlayViewModel":{"icon":{"sources":[{"clientResource":{"imageName":"PLAY_ALL"}}]},"text":{"content":"Alles afspelen","styleRuns":[{"startIndex":0,"length":14}]},"style":"THUMBNAIL_HOVER_OVERLAY_STYLE_COVER"}}],"backgroundColor":{"lightTheme":5836063,"darkTheme":5836063}}},"stackColor":{"lightTheme":10054517,"darkTheme":9664125}}},"metadata":{"lockupMetadataViewModel":{"title":{"content":"Complete Angular 13 Course Step by Step"},"metadata":{"contentMetadataViewModel":{"metadataRows":[{"metadataParts":[{"text":{"content":"procademy

#############################

New on site