tab-slider | Firefox extension which just slides most recent tabs | Browser Plugin library

so I am trying to do some events base on the scrolling of my Angular application.

I have a problem since I am trying to access a element in my HTML with the help of @ViewChild.

I can access the element inside ngAfterViewInit() but I can't access it outside of it. It always shows undefined.

Here is my component class:

I am working with some tabs. Is there a way to add an animation (slide left / right) when I switch tabs?

DEMO

code

I did some modifications to my angular app, trying to use some routes so that i can use anchor (like ids & href so that it goes to the section). However, i moved everything back to its original state, and now the nav component is not being rendered, any ideas why this is happening?

Here is my app component

I'm not sure how to simplify multiple if else statements.

I'm trying to loop through the slick slider to grab each slide and link it with a li item to display the heading for that particular slide

Please see code below for what i have at the moment

I am creating a simple tab like functionality using CSS.

When a tab is active, I set CSS of the selected tab using the tab-slider--tabs:after selector. However one of Tab header text is longer than the other, hence the image looks like this:

How do I dynamically set the width so that it looks like this: