Can't find any starters for Angular running with Strapi v4

Questions and Answers Frontend-Angular
1

Hey there. I’m trying to find a starter using the last techs of Angular and Strapi. I wanted to have a starter like the legacy starter. While I understand it is deprecated for a tons of valid reasons, the reason I ask a “starter” is mostly because of the structuring data problem I’m facing is really difficult to understand here.

Is there any way I can see how we could handle the new apis returned by Strapi somewhere ? I’m having a terrible moment manipulating the data to get it out from a simple Angular app.

Thank you all and have a nice day with Strapi :rocket:

2

I mean you can use any starter and just build a standard angular app and fetch the endpoints :thinking:
Personally using angular and I always separate the projects as I serve angular in a different location then my strapi application, so they do live in different repos.

3

Thanks for taking the time to answer to my question, I misexplained myself :

import { Component } from '@angular/core';

const parseJSON = (resp: { json: () => any; }) => (resp.json ? resp.json() : resp);

// Checks if a network request came back fine, and throws an error if not

;
const headers = {
  'Content-Type': 'application/json',
};

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent {
  contenu = [];
  error: unknown;

  async ngOnInit() {
    try {
      const contenu = await fetch('http://localhost:1337/api/contents', {
        method: 'GET',
        headers: headers,
      })
        .then(parseJSON);
      this.contenu = contenu.data;
      console.log(contenu.data);
    } catch (error) {
      this.error = error;
    }
}
}

Array(1)
0:
attributes: {testcontenu: 'test', contenu: 'testtestestes', createdAt: '2022-05-03T11:38:40.330Z', updatedAt: '2022-05-03T11:38:41.250Z', publishedAt: '2022-05-03T11:38:41.248Z'}
id: 1
[[Prototype]]: Object
length: 1
[[Prototype]]: Array(0)

And this is the answer I’m getting, on discord they suggested me to map it like this :

result = contenu.data.map(e => e.attributes)

but I can’t seem to put it on my front that looks like this :

   <h1 *ngFor="let contenu of contenu">{{ contenu['attributes.testtest'] }}</h1>
   <p>
    <markdown *ngFor="let contenu of contenu">
      {{ contenu['attributes.testcontenu'] }}
    </markdown>

I’m just trying to get the data out of my array working on the dynamic angular app, so this is kind of why I was looking at an available starter that would explain how to get them back on Strap v4.

4

I’m looking for help to anyone having that kind of issues :frowning:

5

If you are using angular i would suggest use RXJS instead :slight_smile: More solid to be used then “fetch”
As you can do pipes with it and then do the map in there and then use ngFor etc :slight_smile:

6

I used a “util.inspect”, a node.js utility, to display the Strapi object via console.log. Once I saw the schema, I could use Map() to iterate through the Strapi object.

Example: util.inspect(contenu, showHidden=false, depth=2, colorize=true);

For more information, go here: How to use util.inspect

I hope this helps.

7

Just a question if this is an Angular question why do we give nodeJS advises :thinking:
Any advice is good but it’s not going to kind of do anything with Angular :slight_smile:

8 
Is there any way I can see how we could handle the new apis returned by Strapi somewhere ? I’m having a terrible moment manipulating the data to get it out from a simple Angular app.

Perhaps, I misunderstood the author. I thought by using util.inspect you can see the schema via console log and it will allow him to extract the data in Angular. I apologize if my advice is useless.

1 Like
9

No no not useless just a bit off topic I think.
Not sure if utils since it’s node is part of thr developer console.

Then again you can map and tap in angular in rxjs which you can console log the data at any point. :thinking::blush: