file to change Zulu/src/app/navigator/navigator-entity /navigator-entity.component.html
I want you to build an mac os finder like navigator that uses the keyboard to navigate right and left to the level that the user wants. employ the use of advanced angular code.
I want to be able to define a Json tree to describe the structure of the navigation tree.
insert your code where appropriate taking into account the services that use the keyboard extensions.
break your work step by step in small little blocks.
• Import the Injectable and EventEmitter classes from @angular/core.
• Declare and export a KeyboardService class.
• In the KeyboardService class, declare a leftKeyPressed and a rightKeyPressed event emitter.
• In the KeyboardService class, add a constructor that listens for keyboard events and emits the leftKeyPressed or rightKeyPressed event when the left or right arrow key is pressed.
Sandbox Execution Logs
• Import the KeyboardService class.
• In the NavigatorEntityComponent class, add a constructor that injects the KeyboardService.
• In the NavigatorEntityComponent class, add a ngOnInit method that subscribes to the leftKeyPressed and rightKeyPressed events of the KeyboardService and updates the navigation tree accordingly.
• Modify the NavigatorEntityComponent class to use a JSON tree to describe the structure of the navigation tree. This will involve parsing the JSON tree and creating a corresponding DOM structure.
Sandbox Execution Logs
• Modify the template to reflect the changes in the component's logic. This will involve adding *ngFor directives to iterate over the navigation tree and adding (click) directives to handle click events.