Looking to enhance navigation tabs with left and right arrows for better support of larger tab sizes in the nav menu.
I attempted using Primeng since my Angular 8 application already utilizes this library.
Are there any other libraries besides Angular Material that offer this feature?
https://i.sstatic.net/C76gu.png
I've created an example here:
https://stackblitz.com/edit/primeng-tabview-ngif-hluezs
Here's an example using Angular Material:
To achieve this functionality, consider creating a custom directive...
Include the following CSS in your styles.css file:
.nav-wrapper {
position: relative;
overflow: hidden;
padding: 0;
}
.nav-wrapper > ul {
display: flex;
}
.nav-wrapper--scrollable {
padding: 0 32px;
}
.nav-arrow {
position: absolute;
display: none;
top: 0;
bottom: 0;
z-index: 1;
border: 1px solid #2399e5;
background: #2399e5;
font: 14px/1 FontAwesome;
color: #fff;
cursor: pointer;
}
.nav-wrapper--scrollable .nav-arrow {
display: block;
}
.nav-arrow:hover {
border: 1px solid #1f89ce;
background: #1f89ce;
}
.nav-arrow:before {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.nav-arrow--left {
left: 0;
}
.nav-arrow--left:before {
content: "\f053";
}
.nav-arrow--right {
right: 0;
}
.nav-arrow--right:before {
content: "\f054";
}
.nav-arrow--disabled,
.nav-arrow--disabled:hover {
background: #ccc;
border: #ddd;
cursor: default;
}
Implementation of the directive:
// Angular Directive Code
// Source: [link here]
To use the directive in your HTML:
<p-tabView appTabScroller>
<p-tabPanel [header]="item.content" *ngFor="let item of items; let i = index" [selected]="i == 0">
</p-tabPanel>
</p-tabView>
Source: Link to Source
I took your example and enhanced it by including some interactive buttons at the top for navigating between tabs. There are multiple ways to achieve this effect, so feel free to explore different options.
If you're interested, you can view the updated example with the added functionality here.
Feel free to let me know if the CSS aspect is more challenging, as this version primarily focuses on demonstrating the functionality.
Within my Angular application, the value of a variable is manipulated by an HTML element <input> through two-way binding like this: <input [(ngModel)]=variableName (OnKeyup)="DoSomething" > However, the two-way binding with ...
Currently, I am facing a challenge in defining inputs for an Angular8 Directive while also supporting a legacy Directive. My plan going forward is to name my inputs in camel-case, but the existing inputs are in kebab-case. Therefore, in order to support th ...
I am encountering issues with my formData resulting in an empty object or a bad request error when trying to post a file upload to the server. The problem seems to originate from the service where FormData is being created, as it sends the formData over as ...
I have a dynamic dashboard of cards that I created using the ng generate @angular/material:material-dashboard command. The cards in the dashboard are structured like this: <div class="grid-container"> <h1 class="mat-h1">Dashboard</h1> ...
I'm working on a project with a child component as a map and a parent component as a form. The parent component has a field for writing the address, and when an address is entered, an HTTP request is triggered to find the latitude and longitude coordi ...
How can I prevent repetition of values when creating a dynamic select based on an object fetched from a database? Below is the HTML code: <router-outlet></router-outlet> <hr> <div class="row"> <div class="col-xs-12"> & ...
I am encountering an issue with my tooltip component's animations. The ":enter" animation is working as expected, but the ":leave" animation never seems to trigger. For reference, here is a link to stackblitz: https://stackblitz.com/edit/building-too ...
Utilizing NgForm, I dynamically added a validator to the input field. In my first example, everything works perfectly when I use the button setValidation to validate the input. However, in the second example where I add formGroup, I encounter an error whe ...
I am facing a challenge with deleting items from an array based on two property values. If we were to compare it to the classic Sql delete command, the equivalent would look something like this: DELETE oImages WHERE idOffertRow = 1 and idProductImage = 2 ...
I am seeking guidance on how to dynamically disable a button based on the input values of both Name and State in the given code snippet. Specifically, I want to restrict button functionality until both name and state fields are filled out, regardless of ...
I am facing an issue with my proxy configuration where it is not redirecting as expected based on the rewrite configuration. You can find my proxy.config.json below: { "/sap": { "target" : "http://server.domain.com:8002", "secure" : fa ...
In my pursuit of a solution to move from one input to another on the press of the Enter key, I came across various posts suggesting custom directives. However, I prefer a solution that works without having to implement a directive on every component. My a ...
In a file, I have written a function and exported it like this: export function foo(params...) { // do something } When initializing the model, I imported the function in the following manner: import { foo } from "../path/..." instanceMethods: { foo ...
Is there a way to automatically create a new row within the 'td' element after the ngFor directive has generated 10 image repeats? Currently, all the images are displayed in a single td and as more images are added, they start to shrink. <td ...
Recently, I developed an express app with a nested app called users using Typescript. The structure of my app.js file is as follows: ///<reference path='d.ts/DefinitelyTyped/node/node.d.ts' /> ///<reference path='d.ts/DefinitelyTyp ...
I'm facing an issue where I am unable to locate 'count' and assign {count: number; title:string} type to IntrinsicAttributes in a React and TypeScript environment. There are two components involved, ParentComponent and ChildComponent. In t ...
I am currently running Angular CLI version 7.1.4 and I have been attempting to update to the latest version. However, each time I try to update, I encounter a multitude of errors. I have attempted using the command ng update @angular/core @angular/cli b ...
When mocking services without using TestBed and instead relying on Fake Classes, is it considered a best practice to use a Mock with the : any data type? If not, errors like missing items/parameters may occur. Although spyOn can be used as an alternative, ...
Running into issues with commands like "ng add @angular/localize" or "ng add @ng-bootstrap/ng-bootstrap". As a newcomer, I'm struggling to interpret the error messages. I have included screenshots for reference. View angular version screenshot View e ...
Exploring Typescript for the first time on Codepen.io has left me puzzled. I'm unsure why, despite defining the function signature and return type with an interface, I am able to return a different type without encountering any errors. Is there somet ...