Safari browser failing to render Angular2 ngFor content

I am facing an issue with my ngFor loop where only the first element's data is loaded upon page refresh. However, when I click on an empty element, the data suddenly appears. This unusual behavior seems to be specific to viewing in Safari browser. How can I ensure that Safari properly loads all content within the ngFor loop?

https://i.sstatic.net/HuY8K.gif

<article *ngFor="let item of list; let i = index">
    <section class="item__content">
      <h3 class="item__name">
        <a href="#">{{item.name}}</a>
      </h3>
      <p>
        {{item.description}}
      </p>
    </section>
</article>

The data used in this loop comes from an API serving JSON format.

typescriptangular

Answer №1

Through a process of trial and error, I discovered that the issue I was facing was due to a missing specific format in my |date pipe.

<time>{{topic.lastPostAt|date}}</time>

By making this change, I was able to resolve the problem:

<time>{{topic.lastPostAt|date:"MM/dd/yy"}}</time>

Interestingly, this crucial detail was not included in my example code on StackOverflow. It's worth noting that Safari only rendered the content after a user event had been triggered for some reason.

Answer №2

Encountering a similar problem with angular 2 and Safari, I managed to resolve it by including the following library:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=Intl.~locale.en"></script>

It was crucial for me to insert this before any other libraries in the code.

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

"Step-by-Step Guide: Displaying a New Component When a Table Row is

I am currently working with an API to populate a table within the router outlet, but I would like to know how I can load a different component that displays the details of a selected row. For example, if the table contains a list of equipment, I want to be ...

angulartypescriptangular8

The signal property 'ɵunwrapWritableSignal' is not found on the specified type 'typeof import/node_modules/@angular/core/index")'

Despite attempting the solutions provided in previous threads, none of them have been successful for me. Can someone please lend a hand with this issue? https://i.stack.imgur.com/sGRsn.png ...

htmlangularnode-modules

JHipster form validation is failing to function properly

I have a specific class structure that is defined as follows in JDL entity Address { address String required, city String required, postalCode String required, country String required, } entity MainEntity { <some fields> } relationship O ...

angularjhipster

Adjusting column width in Bootstrap grid when content is missing

Currently, I am encountering a problem with the grid system while attempting to create a kanban style drag and drop system. The issue is illustrated in the image below. Each card should be positioned according to the arrows shown. As the 2nd column is cur ...

htmlcssangularbootstrap-4css-grid

What steps can I take to generate a JSON array with this unique format?

The data I received from my angular form is in the array format: [{"name":"Rose","number":"+919224512555"},{"name":"smith","number":"+91975555224"}]. The data represents a dynamic table with columns for name and number. I need to convert the array above i ...

javascriptangular

Tips for ensuring that Angular2 waits for a promise to resolve before rendering a component

Yes, I did a thorough search on Google before posting this question and unfortunately, the provided solution did not solve my issue. A Little Background I am working on an Angular 2 component which fetches data from a service and needs to carry out certa ...

angularresolver

Error encountered while uploading a file with Fastify and Nestjs

I encountered an issue while attempting to upload a file to my nest.js server, receiving the following error message: Error: Unsupported Media Type: multipart/form-data; boundary=--------------------------140603536005099484714904 https://i.sstatic.net/ ...

node.jsangulartypescriptfile-uploadnestjs

We were caught off guard by the TypeScript error: an unexpected token showed up when we were expecting a constructor,

Trying to implement a function within a class in TypeScript. class Test { function add(x: number, y: number): number { return x + y; } } Encountering an error message stating: TypeScript Unexpected token, A constructor, method, access ...

javascripttypescriptecmascript-6es6-class

Angular ensures that the script is loaded only once

Here's a piece of code I wrote: ngOnInit() { this.loadScript('./assets/js/jquery.dataTables.min.js'); this.loadScript('./assets/js/datatable.js'); this.loadScript('./assets/js/common.js'); } Every time the page ...

angular

Guide to automatically generate a timeline graph when a user clicks on the x-range chart using Highcharts Angular

[enter image description here][1]I am working on achieving a design similar to the one shown in the image below. The goal is to display tasks and their related activities at different datetime intervals. The main task will be represented as an x-range char ...

angulardynamichighchartstimelinexrange

Steps for preventing text manipulation in ng2-ace-editorWould you like to restrict users from copying, pasting

How can I prevent users from copying, pasting, and dropping text in ng2-ace-editor? https://github.com/fxmontigny/ng2-ace-editor is the library I implemented in my Angular 5 application. ...

angulartypescriptace-editor

The name 'CallSite' is missing from the Error stack trace when working with Node.js and TypeScript

I am facing an issue with the following code: Error.prepareStackTrace = function ( error: Error, stack: Array<CallSite>, ) { return self.parse(fiber, error, stack) } I am attempting to import the CallSite, but it seems like it cannot be found ...

node.jstypescript

The proper method for organizing a nested array object - an obstacle arises when attempting to sort the array

I have a collection of data fetched from Web API 2.2 stored in an Angular array as objects. Each object represents a Client and includes properties like name, surname, and a collection of contracts assigned to that client. Here is the interface definition ...

javascriptangulartypescript

Using Typescript, the type T or a function that returns T can be utilized in various scenarios

You can check out a demonstration on this interactive platform. In creating a simple generic type that represents either a variable or a function returning a variable, there was an issue with the typical typeof arg === 'function' check. The erro ...

typescript

When using Next.js, I have found that the global.css file only applies styles successfully when the code is pasted directly into the page.tsx file. However, when attempting to

I recently started exploring nextjs and came across this video "https://www.youtube.com/watch?v=KzqNLDMSdMc&ab_channel=TheBraveCoders" This is when I realized that the CSS styles were not being applied to HeaderTop (the first component cre ...

csstypescriptnext.jstailwind-css

Having difficulty in using pipe to filter records upon clicking the Button

I am having trouble filtering the records as needed. What I want is that when "All" is clicked, no filter should be applied. When any other option is clicked, the filter should be applied. HTML <div class="container " style="padding-top:100px"> ...

angular

Struggling to incorporate Dependency Injection into Angular 4

I have a class defined as shown below: import { Injectable, Inject } from '@angular/core'; @Injectable() export class MovieIndustry { constructor(private music: MusicIndustry) { } producer() { this.music.album(); al ...

angularangular-dependency-injection

TypeORM is failing to create a table upon initialization

Recently, I delved into the realm of typescript and decided to explore TypeORM for backend development. My current project involves building a CRUD API using typeORM and postgreSQL. After configuring everything initially, I ran the application only to rea ...

node.jstypescriptpostgresqlexpresstypeorm

TypeScript Firestore Reducer: A more efficient way to

I've been working on my reducers and have come across this piece of code: import { Reducer, combineReducers } from 'redux'; import { routerReducer } from 'react-router-redux'; import { firebaseReducer } from 'react-redux-fire ...

typescriptfirebasegoogle-cloud-firestorereact-redux-firebase

What causes the Angular child component (navbar) to no longer refresh the view after a route change?

Hello everyone, I'm excited to ask my first question here. Currently, I am working on developing a social network using the MEAN stack and socket.io. One of the challenges I am facing is displaying the number of unread notifications and messages next ...

javascriptangulartypescriptsocket.ioangular2-template