Enjoy 20% off all plans by following our social accounts!
Check it out
Interviews
Get started
Prepare
Pricing
Sign in / up
Get full access
Transfer List
Framework
React
Angular
Vue
Svelte
Author
Michal Grzegorczyk
Senior Front End Engineer, Ofair
Languages
Difficulty
Medium
Recommended duration to spend during interviews
30 mins
Build a component that allows transferring of items between two lists.
Requirements
There are two lists each initially containing 4 items.
Each item has a checkbox that can be checked/unchecked.
Transferring
Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
Transferred items are added to the bottom of the destination list.
Item selection (checked) states are preserved after transferring.
Buttons are disabled if there are no relevant items to be transferred.
Preview what you need to build
View solution
Click to go back
Click to go forward
Refresh preview
Mark complete
Save to cloud
Description
Solution
Saved code
Transfer List
Framework
React
Angular
Vue
Svelte
Author
Michal Grzegorczyk
Senior Front End Engineer, Ofair
Languages
Difficulty
Medium
Recommended duration to spend during interviews
30 mins
Build a component that allows transferring of items between two lists.
Requirements
There are two lists each initially containing 4 items.
Each item has a checkbox that can be checked/unchecked.
Transferring
Clicking on the double arrow buttons will transfer all items from one list to the other, as specified by the direction of the arrows.
Clicking on the single arrow buttons will transfer only the selected items, as specified by the direction of the arrows.
Transferred items are added to the bottom of the destination list.
Item selection (checked) states are preserved after transferring.
Buttons are disabled if there are no relevant items to be transferred.
Preview what you need to build
Try these questions next
Transfer List II
Difficulty
Hard
Similar Questions
Todo List
Difficulty
Medium
Solution
View the full solution on a new page
Go to solution
You must be signed in to view your saved versions
File explorer
app.component.ts
app.component.html
styles.css
src
app
app.component.css
app.component.html
app.component.ts
app.module.ts
index.html
main.ts
styles.css
angular.json
package.json
tsconfig.app.json
tsconfig.json
tsconfig.spec.json
For now, files cannot be created or renamed. It's acceptable to write multiple components within a single file during interviews.
Theme
Active4D
All Hallows Eve
Amy
Birds of Paradise
Blackboard
Brilliance Black
Brilliance Dull
Chrome DevTools
Clouds Midnight
Clouds
Cobalt
Cobalt2
Dawn
Dracula
Dreamweaver
Eiffel
Espresso Libre
GitHub Dark
GitHub Light
GitHub
IDLE
Katzenmilch
Kuroir Theme
LAZY
MagicWB (Amiga)
Merbivore Soft
Merbivore
Monokai Bright
Monokai
Night Owl
Nord
Oceanic Next
Pastels on Dark
Slush and Poppies
Solarized-dark
Solarized-light
SpaceCadet
Sunburst
Textmate (Mac Classic)
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tomorrow-Night
Tomorrow
Twilight
Upstream Sunburst
Vibrant Ink
Xcode_default
Zenburnesque
iPlastic
idleFingers
krTheme
monoindustrial
Loading editor
Theme
Active4D
All Hallows Eve
Amy
Birds of Paradise
Blackboard
Brilliance Black
Brilliance Dull
Chrome DevTools
Clouds Midnight
Clouds
Cobalt
Cobalt2
Dawn
Dracula
Dreamweaver
Eiffel
Espresso Libre
GitHub Dark
GitHub Light
GitHub
IDLE
Katzenmilch
Kuroir Theme
LAZY
MagicWB (Amiga)
Merbivore Soft
Merbivore
Monokai Bright
Monokai
Night Owl
Nord
Oceanic Next
Pastels on Dark
Slush and Poppies
Solarized-dark
Solarized-light
SpaceCadet
Sunburst
Textmate (Mac Classic)
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tomorrow-Night
Tomorrow
Twilight
Upstream Sunburst
Vibrant Ink
Xcode_default
Zenburnesque
iPlastic
idleFingers
krTheme
monoindustrial
Loading editor
Theme
Active4D
All Hallows Eve
Amy
Birds of Paradise
Blackboard
Brilliance Black
Brilliance Dull
Chrome DevTools
Clouds Midnight
Clouds
Cobalt
Cobalt2
Dawn
Dracula
Dreamweaver
Eiffel
Espresso Libre
GitHub Dark
GitHub Light
GitHub
IDLE
Katzenmilch
Kuroir Theme
LAZY
MagicWB (Amiga)
Merbivore Soft
Merbivore
Monokai Bright
Monokai
Night Owl
Nord
Oceanic Next
Pastels on Dark
Slush and Poppies
Solarized-dark
Solarized-light
SpaceCadet
Sunburst
Textmate (Mac Classic)
Tomorrow-Night-Blue
Tomorrow-Night-Bright
Tomorrow-Night-Eighties
Tomorrow-Night
Tomorrow
Twilight
Upstream Sunburst
Vibrant Ink
Xcode_default
Zenburnesque
iPlastic
idleFingers
krTheme
monoindustrial
Loading editor
Browser
Console
Click to go back
Click to go forward
Refresh preview
Filter logs
Filter by log level
All log levels
Info
Warnings
Errors
JavaScript Console
console.log()
statements will appear here.
Mark complete
Save to cloud