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

Encountering the error message: ERESOLVE unable to solve dependency tree while trying to install

I'm encountering an error when attempting to install a dependency. How can I resolve this issue? npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi/l/email-protection" cla ...

node.jsreactjsangularreact-nativenpm

AngularJS Constants in TypeScript using CommonJS modules

Let's talk about a scenario where I need to select a filter object to build. The filters are stored in an array: app.constant("filters", () => <IFilterList>[ (value, label) => <IFilterObject>{ value: value, label: label } ]); i ...

javascriptangularjstypescript

Experiencing issues when running `ng serve` with a basic Angular CLI project created using

Just started using angular-cli and initiated an angular 2 project with the command ng new angular2. However, upon trying to run it using ng serve, I encounter crashes accompanied by errors. Error Log: ERROR in [default] C:\Users\user\deskt ...

angularwebpackjasmineangular-cli

How can a new component be added as a child of an element without replacing or interfering with other

Whenever I dynamically generate components and attach them as children to an element upon creation, everything within that element gets deleted. Here's an example: public fn(event) { // Create component factory const factory = this.componentF ...

angular

Lint found an issue: The variable 'post' has been defined but is not being utilized in the code

Within my codebase, I have included the following import: import { post } from '@loopback/rest' This is how I am utilizing it in my project: export class MyClass { @post('/example/test', {}) } Unfortunately, a lint error has been de ...

reactjstypescriptlint

angular index.html code displayed

I successfully deployed an Angular app on a server in the past without any issues. The Angular version is 6.1.1, Angular CLI version is 6.2.9, npm version is 6.13.4, and node version is 10.18.0 for both local and server environments. The server is running ...

htmlnode.jsangulargitnpm

Issue with PrimeNG Calendar month picker functionality not functioning as expected

I recently integrated a PrimeNG code snippet for a month picker. Although it is functioning correctly, I noticed a discrepancy compared to the PrimeNG example - specifically, the year does not change when clicking on the arrow buttons. The ngModel, howev ...

angularcalendarprimeng

Implementing a variable for an array in Angular 4: A step-by-step guide

I need help determining the correct value for skill.team[variable here].name in Angular, where all team names are retrieved from the skill. Below is the code snippet: HTML <select [(ngModel)]="skill.teams[1].name" name="teamName" id="teamName" class= ...

angulartypescript

*ngFor is not rendering

I understand that this question is frequently asked, but the usual solutions don't seem to be effective in this case. Here is my code snippet: export class CourseReviewFormComponent implements OnInit { form: FormGroup questionnaire: string[] = [] ...

angulartypescriptfirebasefirebase-realtime-databaseangular-forms

Software designed for apple silicon ARM64 running Electron framework

Running the Electron desktop application successfully on X64 using electron-builder and dmg. Now, if we need to run the same application on Apple Silicon (ARM64), we followed the steps below: Installed Xcode 12 and upgraded Mac to Big Sur. Executed " ...

angularelectronelectron-builderelectron-packagerapple-silicon

Using AngularFire2 to manage your data services?

After diving into the resources provided by Angular.io and the Git Docs for AngularFire2, I decided to experiment with a more efficient approach. It seems that creating a service is recommended when working with the same data across different components in ...

angulartypescriptfirebasedataservice

Tips for adding a "Select All" feature to a dropdown list?

Currently, I have a dropdown list with a filter for IN and OUT values. The functionality is working as expected: <select class="form-select" style="max-width: 100px" [ngModel]="selectedBrand" (ngModelChange)="onChangeT ...

javascriptangulartypescript

Having issues with NGXS subscription not functioning properly when selecting a variable

Currently, I am working with Angular 11 and NGXS. One issue I am facing involves a subscription for a variable in the state. Here is the problematic subscription: @Select(state => state.alert.alerts) alerts$: Observable<any[]> ngOnInit(): void { t ...

angulartypescriptngxs

Swap out the traditional for loop with a LINQ query utilizing the any method

In my TypeScript code, I have the following snippet: public executeTest(test: Test): void { const testFilters: Record<string> = getTestFilters(); let isTestingRequired: boolean = false; for (let i: number = 0; i < testFilters.leng ...

javascripttypescriptlinqlambdaany

Creating components with SCSS files in an Angular library can be achieved by following a few simple

After creating an scss app and associating a library, I encountered an issue when trying to create components with .scss files inside the library. Angular automatically assigned a css file to the component created within the library. The application (name ...

angularsassshared-libraries

The only numbers that can be typed using Typescript are odd numbers

I am looking for a way to create a type in Typescript that can check if a value is an odd number. I have searched for solutions, but all I find are hardcoded options like odds: 1 | 3 | 5 | 7 | 9. Is there a dynamic approach to achieve this using only Types ...

javascripttypescript

Is there a way to access the [class.editable] value during an Angular unit test?

For my unit test, I am trying to retrieve the value of [class.editable]. <div class="coolcomponent layout horizontal center" [class.editable]=editable> ..... </div> When using fixture.nativeElement.querySelector('editable');, my e ...

angulartypescriptunit-testingjestjs

Is it possible to easily extract all values associated with a particular key in a nested JSON using JavaScript?

I have a JSON structure that looks like this: [ { cells: [ { id: "1", cellType: 3, widget: { id: 1, description: "myDesc"} }, { id: "2", cellType: 4, widget: { id: 2, description: "myDesc2"} } ] }, { cells: [ { id: "3", c ...

javascriptarraysjsonangularecmascript-6

How can the life cycle of a component be maintained after the constructor until the function in the constructor has finished executing?

I'm currently developing an Angular 2 application. Within this application, I have a component responsible for displaying the menu. This component contains an array of menu items that are initially set to be displayed based on permissions retrieved f ...

angular

Encountering a 404 error while attempting to "Fetch data" in a .NET Core SPA template application, specifically when utilizing a proxy

After creating an Angular project with the .NET core 2.2 and spa template, I made modifications to startup.cs in order to implement a proxy development server while serving angular. This allowed me to run my server and client code separately. I referred t ...

c#angularasp.net-corespa-template