Member-only storyRakia Ben SassiFollowBetter Programming--ShareIf you prefer to watch, there is a video version available here.A few months ago, I refactored an Angular application in order to extract the Breadcrumb feature into a reusable component, which I could use with other applications.However, I encountered a problem when I tried to use the new component lib-breadcrumb.The breadcrumb in my application had three items:This path is displayed correctly in the breadcrumb, as you can see below, and also reflected in the URL in the browser:When the user clicks on the other navigation tab, the appropriate content with the “Ecs Fields” table, instead of the “Ecs Fieldsets” table, will be displayed.Yet, the last item in the breadcrumb was still holding the name of the previously selected tab “Fieldsets” instead of showing the current one. But when I refresh the browser tab, it will be updated. That behavior looked like a bug that needed to be fixed.So, I investigated the source code and started with the template of the view above:It contains two nested components:The breadcrumbItems variable is actually an array that is initialized in the…----Better ProgrammingGoogle Developer Expert in Angular, WTM Ambassador, a seasoned software engineer, Content Creator | YouTube: https://www.youtube.com/@tekforgeRakia Ben SassiinLevel Up Coding--5VinitainBetter Programming--38Benoit RuizinBetter Programming--221Rakia Ben SassiinChange Your Mind Change Your Life--6Dmitrii EliuseevinTowards Data Science--1ErxkinITNEXT--1Dr. Ashish BamaniainLevel Up Coding--64Allen HeltoninBetter Programming--4Tom Jay--128Alexander Obregon--HelpStatusAboutCareersBlogPrivacyTermsText to speechTeams