I am looking to showcase a set of words from an array using the card component. Is there a way to display only one card at a time and cycle through them by clicking?
(I want each card to contain its own unique word, rather than just changing the text in a single card.)
If you are searching for a solution, the code snippet below may be just what you need. To achieve the desired effect of smooth transitions between the hide and show classes, consider animating them:
<div
*ngFor="let word of wordArray, let i = index"
[class.show]="selectedCard === i"
[class.hide]="selectedCard !== i"
(click)="onCardClick(i)"
>
{{ word }}
</div>
selectedCard: number = 0
onCardClick(id: number): void{
this.selectedCard = id + 1
}
Building on Roy's suggestion, a possible implementation could look like the following:
HTML
<app-card-component *ngFor="let card of oneByOneArray"><app-card-component>
<button (click)="nextWord()"></button>
COMPONENT
const words = ['word1', 'word2', 'wordN']
const oneByOneArray = [];
nextWord(){
this.oneByOneArray.push(words.pop());
}
Do you have a component named "app-card-component"?
I want to simplify things for you regardless of your level of understanding.
Usually, when displaying components with arrays, you would use *ngFor. In this case, it could look like:
<app-card-component *ngFor="let card of oneByOneArray; index as i"><app-card-component>
(where oneByOneArray is the array where words are pushed one by one).
To show the words one by one, I recommend using a separate array to push the words to upon clicking.
When clicked, you can use the index i from our *ngFor to find the next word to add to our oneByOneArray.
A function to achieve this may look like:
pushWordWithIndex(i) {
this.oneByOneArray.push(this.originalArray[i] + 1);
}
You can then add a click event to the card as follows:
<app-card-component *ngFor="let card of oneByOneArray; index as i" (click)="pushWordWithIndex(i)"><app-card-component>
Pro tip:
Make sure to call the pushWordWithIndex function in ngOnInit or else no cards will be displayed. this.pushWordWithIndex(0);.
I encountered an issue while trying to handle errors for a method in Angular. After adding a catchError check using the .pipe() method, I noticed that the variable roomId was marked with a red squiggly line. The error message read: TS2345: Argument of type ...
When I try to run my application on Heroku, I encounter an Application error. Both commands heroku logs --tail heroku logs -n 1500 result in this error message for me: Error: Missing required flag: -a, --app APP app to run command against For more a ...
Here is the structure of my app: App A App B Common package Both App A and App B have included the common package in their package.json: { dependencies: { "commonPackage": "file:../../../commonPackage" } } React is being used by both apps an ...
I am eager to master the use of MEAN stacks with Angular 2.0 and TypeScript instead of JavaScript as required. While I have been studying the guides at https://angular.io/guide/quickstart to understand NG2, my challenge lies in integrating all these techno ...
This is NOT a repeated query: This particular issue presents the problem, but it pertains to a project not built with angular-cli like mine does, hence a webpack.config file is absent. While my described dilemma involves accurately configuring the base_u ...
As per the documentation from Mozilla, I should be able to utilize browser.storage.sync.get in my extension. However, I am encountering some challenges in getting TypeScript to recognize that I can use browser. I have attempted the following (which has wo ...
What is the best way to ensure that the specified keyof a type extends an array? Consider the following type example: type TestType = { arrayKey: Array<number>, notArrayKey: number } There is also a function that accesses the specified key ...
I am facing a challenge with my code that is supposed to hide div elements containing a specific word along with additional text. I have tried multiple solutions but none seem to work effectively. Any assistance on how to hide divs properly will be greatl ...
There was an ERROR in the TypeScript file: node_modules/@types/d3-array/index.d.ts on line 36. The error states: "error TS2574: A rest element type must be an array type." The code causing the issue is as follows: export type NestedInternMap<TObject, T ...
Currently, I'm utilizing the babel compiler for compiling my React component libraries. The initial choice was influenced by Create React App's use of the same compiler. However, I've encountered challenges with using babel for creating libr ...
I have been working on developing an Ionic app that requires creating a session for user login. The goal is to store the user's name upon logging in, so it can be checked later if the user is still logged in. I have created a model class and a user cl ...
Suppose you have a React component: interface Chat { someId: string; } export const Chat = (props: Chat) => {} and someId is defined in your mapStateToProps: function mapStateToProps(state: State) { return { someId: state.someId || '' ...
I'm in the process of testing my React application using Jest. When I initiate the command to run the tests, jest, an error is thrown stating: Debug Failure. False expression: Output generation failed 1 | import * as TestData from 'TestMo ...
Encountering a peculiar issue here. When the submit button is clicked, my angular form group does not return anything. Additionally, nothing is being logged to the console upon clicking. Interestingly, this form is almost identical to another one that func ...
I am facing a challenge with a function: function navigateOptions(currentScreenRoute: 'addGroup' | 'addGroupOnboarding', group: GroupEngagement) { const navigationKey = currentScreenRoute === 'addGroup' ? 'addGroupPeopl ...
I have a project where I am utilizing angular's $http service to fetch data from a remote endpoint. I am keen on incorporating rxjs Observables, hence the call in my service is structured as follows: userInfo() : Rx.Observable<IUserInfo> { ...
Whenever I try to make a post request in my ionic2 application, I encounter an error without any specific message. It seems like there is something wrong with my Angular2 post request. Below is the function I am using for the request: load(username, pass ...
Hello there! I am currently attempting to execute a basic Protractor test (still learning Protractor) and running into an error consistently. Provided below is my package.json file: "devDependencies": { "@angular-devkit/build-angular": "~0.803.8", ...
Presently, I am immersed in a project involving three.js and TypeScript. It has come to my attention that for organizing elements, the Group class is highly recommended. However, I have noticed that the type definitions for Group do not include a feature l ...
I'm currently diving into the world of TypeScript, teaching myself by putting my newfound knowledge into practice. Below is the code I'm working on, but I've hit a roadblock trying to access the fields of the type passed to the function. C ...