Problem with file organizer in Angular application - unable to see files and directories

I successfully integrated a file manager component following this tutorial. Despite no errors in vscode or chrome debug tool, my folders are not visible. Can anyone help me troubleshoot this issue?

https://i.stack.imgur.com/ihEak.png

I am unsure how to resolve this issue. I am willing to provide any necessary information :)

Update 1

I suspect the problem lies in importing styles externally. I have only created index.html and style.scss - do they need to be connected somehow?

https://i.stack.imgur.com/AmoC5.png

Index.html :

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Styles.html:

@import '~@angular/material/prebuilt-themes/indigo-pink.css';

html {
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
}

Update 2

I have added mp-file-explorer.component files:

*.ts:

[Component code here]

*.html:

[HTML code here]

*.scss:

[SCSS code here]

Update 3

I have included more details:

[Main component typescript code here]

Main.component.html:

[Main component HTML code here]

Update 4

[MpFileService angular service code here]
angulartypescript

Answer №1

The file list within the HTML is connected to

@Input() fileElements: MpFileElement[] = [
    {
      id: '',
      isFolder: false,
      name: '',
      parent: ''
    }
  ];

This property is marked as @Input(), allowing it to be set by the parent component. It's worth noting that it's currently initialized with an array containing only one empty object.

Without seeing the parent component, it's difficult to understand why @fileElements isn't populated.

Update:

After reviewing your parent component, it appears there may be some issues causing the behavior you're experiencing.

Firstly, consider moving the code from the constructor body to the ngOnInit() method. Constructors should primarily handle dependency injection, while ngOnInit() is where component initialization logic belongs.

Secondly, ensure that this.currentRoot is properly set before calling updateFileElementQuery(). Without a valid value in this.currentRoot, the this.fileElements assignment will not occur as expected due to the guard clause in the method:

updateFileElementQuery() {
    if ( this.currentRoot !== undefined && this.currentRoot.id ) {
      this.fileElements = this.fileService.queryInFolder(this.currentRoot ? this.currentRoot.id : 'root');
    }
  }

To troubleshoot, try adding a console.log(this.currentRoot) at the beginning of this method to verify its state.

I've created a basic StackBlitz example to illustrate the sequence of events: https://stackblitz.com/edit/angular-m5nmru. While it lacks interactivity, it provides a foundation for setting up the initial filesystem structure and executing queries.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The classification of a property is determined by the types of the other properties present

I am trying to figure out a way in Typescript to create a general component that takes a prop called component, with the remaining props being specific to that component. How can I achieve this? For example: <FormField component={Input} ... /> Thi ...

reactjstypescriptreact-native

SweetAlert2 not displaying properly in Ionic6 - troubleshooting the issue

My current project is an Ionic 5 Angular project with SweetAlerts2 popups. Recently, I decided to upgrade to Ionic6 and encountered an issue where the SweetAlerts2 popups are not displaying correctly. The alert seems to only show up in the header, leaving ...

javascriptangularionic-frameworkionic6

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

typescriptvisual-studio-codematerial-uireact-hook-formcodesandbox

Limiting the assignment of type solely based on its own type, without considering the components of the type

I have defined two distinct types: type FooId = string type BarId = string These types are used to indicate the specific type of string expected in various scenarios. Despite TypeScript's flexibility, it is still possible to perform these assignment ...

typescript

How to dynamically assign a type based on a single choice from multiple options (props)

I have a props object that includes: { option1, option2, option3, option4, general, otherProps } The requirement is to allow only one option to be used at a time. Here are the types defined: interface MyTypes { option1: boolean option2: boolean option3 ...

typescripttypescript-genericsreact-typescript

Error message in TypeScript: A dynamic property name must be a valid type such as 'string', 'number', 'symbol', or 'any'

Attempting to utilize the computer property name feature in my TypeScript code: import {camelCase} from "lodash"; const camelizeKeys = (obj:any):any => { if (Array.isArray(obj)) { return obj.map(v => camelizeKeys(v)); } else if (ob ...

javascripttypescript

Using Angular2 to perform search functions within the Loopback framework

Can anyone assist me with implementing a "wildcard" query using loopback to search data from the database in my angular2 project? Thank you in advance for your help. This is the query I am trying to use: this.model.find({ "where": { "wildcard ...

elasticsearchtypescriptangularloopback

Error: The function setEmail is not defined. (In 'setEmail(input)', 'setEmail' is not recognized) (Cannot utilize hooks with context API)

App.js const[getScreen, showScreen] = useState(false); const[getEmail, setEmail] = useState(""); <LoginScreen/> <LoginContexts.Provider value={{getEmail,setEmail,getScreen,showScreen}}> {showScreen?<Screen2/>:<LoginScre ...

javascriptreactjstypescriptreact-nativereact-context

Encountered a problem during the installation of firebase @angular/fire

I've been developing an Angular chat application and ran into some issues when trying to install Firebase using the command "npm install --save firebase @angular/fire". The installation resulted in a series of errors, with the main problem appearing t ...

angularnpmfirebase-realtime-databaseangularfire2angularfire

Issue: The JSX element 'X' is missing any constructors or call signatures

While working on rendering data using a context provider, I encountered an error message stating "JSX Element type Context does not have any constructor or call signatures." This is the code in my App.tsx file import { Context } from './interfaces/c ...

reactjstypescriptreact-typescripttsx

Adjustable image within a div based on the length of the title when viewed in Edge browser

I am facing an issue with a div element. Here is the code snippet: <div fxLayout="column" fxLayoutGap="20px"> <h1 class="mat-display-1">Welcome to $TITLE$</h1> <img *ngIf="logoData" [src]="logoData" class="logo" alt="logo"/> &l ...

htmlcssangular

Retrieve the input value from a Bootstrap Form Input

When using a Bootstrap Form Input to allow the user to enter text, I am wondering how to save that text and use it as a parameter in a function. Below is the HTML snippet I have: <!--Directory Input Form--> <div class="row"> <div class= ...

jqueryhtmlangularjstwitter-bootstrapangular

The ngmodel variable is not responding to dynamic changes

I'm currently working on dynamically changing a date and getting it to reflect in the view, but for some reason it's not showing up. When the date is hard-coded in an array like this, it works perfectly fine and shows up in the view. My date : Ar ...

angularionic-frameworkionic4

Encountering difficulties with Bootstrap toggle functionality in Angular 2.0 following the establishment of a MEAN stack

While setting up a MEAN stack app following a tutorial, everything was going smoothly until I decided to test some Bootstrap components from their site. After installing Bootstrap in the index.html file for Angular, I noticed that Bootstrap was being loade ...

node.jsangularexpresstwitter-bootstrap-3

Is it possible to automatically correct all import statements in a TypeScript project?

After transferring some class member variables to a separate class in another file, I realized that these variables were extensively used in the project. As a result, approximately 1000 .ts files will need their imports modified to point to the new class/f ...

typescriptimportwebstorm

Can we rely on the security of Ionic 4 secure storage encryption?

I'm currently developing an application that necessitates the user to be in close proximity to a specific GPS location. At present, I am obtaining their location every 30 seconds, transmitting it to my server, checking if they are near the desired loc ...

angularionic-frameworkencryptionionic4

What is the reason behind this build error I am encountering while using react-three-xr?

I'm having trouble understanding this error message. What steps can I take to resolve it? Although I have included three-xr in my react app, I am encountering the following error: Failed to compile. ../../node_modules/@react-three/xr/src/DefaultXRCon ...

reactjstypescriptthree.jsreact-three-fiberreact-three-drei

Having trouble reloading a seekbar (input range) in Angular 7 with a function?

I am currently in the process of developing a music player using Angular 7, and below is the HTML code for my component: <div class="track-controller"> <small>{{musicPlayerService.getCurrentTime()}}</small> <div class="progress- ...

htmlangulartypescript

What is the process for setting up SSL for Angular e2e testing?

I'm working on an Angular sample project that includes end-to-end tests focusing on OAuth2 and OIDC flows. I've noticed that the behavior of browsers varies when SSL/TLS is enabled or disabled. To ensure consistency, I would like to run my end-to ...

angularseleniumsslprotractorangular-cli

Guide on transforming an Angular 6 project into a Progressive Web Application (PWA)

Currently, my Angular 6 project is up and running smoothly. However, I am looking to integrate PWA into my existing application. When I execute the following command: ng add @angular/pwa The output displays: + @angular/<a href="/cdn-cgi/l/email-protec ...

angularangular6progressive-web-apps