Building Angular 2 - Generate Multiple Sections in HTML with the Click of a Button

  <div class="schedule-time">
      <span>Include Schedule Time <span class="adr" (click)="AddNewSchedule()">+</span></span>
........
</div>



     <div *ngFor = "let i of OpenNewSchedule">
          <div  class="time-cl">
            <div class="time-ch">
              <div class="from-time" (click)="addOpentime()">
                  <input type="date" class="form-control hide-dt">
                  <span class="fdst">Open Time</span>
                  <span class="sdst">{{Opentime}}</span>
              </div>
              <div class="to-time" (click)="addCloseTime()">
                  <input type="date" class="form-control hide-dt">
                  <span class="fdst">Close Time</span>
                  <span class="sdst">{{Closetime}}</span>
              </div>
              <!-- <a  class="time-del"><i class="fa fa-trash"></i></a> -->
            </div>
         </div>
       </div>

.ts

AddNewSchedule(){
for(var i =0; i<10; i++){
this.OpenNewSchedule = true;
  }
}

I am looking to add multiple occurrences of the div OpenNewSchedule, currently it is only being added once, and each added div needs to have a different value.

Is there a way to achieve this?

Answer №1

give it a shot

let mySchedule = [];

createNewSchedule() {
    this.mySchedule.push('new entry');
}


<div *ngFor = "let item of mySchedule">

Answer №2

Here is a helpful suggestion:

let scheduleList = [];

function addNewSchedule() {
    scheduleList.push('Event');
}


<div *ngFor="let event of scheduleList">Event to show: {{event}}</div>

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

typescript in conjunction with nested destructuring

ES6 has definitely made coding more efficient by reducing the number of lines, but relying solely on typescript for everything may not be the best approach. If I were to implement type checking for arguments that have been destructed multiple levels deep, ...

Oops! An error occurred: Uncaught promise rejection - invalid link found for ProductListComponent

I am currently in the process of learning Angular and Ionic, but I am feeling a bit confused as to where my mistake is. I have looked at other questions, but I still can't seem to figure it out. Can anyone provide some assistance? Perhaps someone has ...

What's the reason for Webstorm's Angular (TSLINT) alert when the attribute "_id" is defined in the model?

Currently I am working on a MEAN app, where I aim to define the user "_id" in my model as per MongoDB/Mongoose standards. I wish for properties like "id" to be as transparent as possible, however there seems to be an issue." According to tslint, variable ...

Creating a customized pagination feature in Angular 8 without relying on material design components

I am looking to implement pagination in my Angular 8 project without relying on any material library. The data I receive includes an array with 10 data rows, as well as the first page link, last page link, and total number of pages. Server Response: { ...

Generating an iFrame in Angular with real-time data from Observable sources

I am looking to integrate multiple YouTube videos into my Angular application using iframes. The video URLs are stored in a database, and I need to fetch the 3 most recent ones on each visit. To achieve this, the "youtube" component makes a request to a ...

Struggling with transferring data rows between tables in Angular with Angular Material

I have implemented a data table using angular material with initial data rows. Additionally, I have included an empty data table where rows can be transferred from the first table. Transferring rows from the first table to the second table is functioning ...

Error: The version of @ionic-native/[email protected] is not compatible with its sibling packages' peerDependencies

When attempting ionic cordova build android --prod, the following error occurred: I have tried this multiple times. rm -rf node_modules/ rm -rf platforms/ rm -rf plugins/ I deleted package.lock.json and ran npm i, but no luck so far. Any ideas? Er ...

Choosing an SVG Circle Using TypeScript

I am facing an issue with selecting a simple SVG <circle> element in my DOM using TypeScript: <svg viewBox="0 0 200 200"> <circle cx="50" cy="50" r="45" id="myCircle"/> </svg> In ...

Accessing the index in an Angular ngFor loop allows for

Is there a way to access the index within ngFor in Angular? Check out this link for more information. Appreciate any help! Thank you. ...

Can one extract request data from an rxjs-timeout-error?

Currently, I am working on enhancing our error handling system, particularly in providing better descriptions of errors in both general and testing environments. My focus is on an Ionic app, but I am facing challenges with the rxjs timeout method. One asp ...

Monitoring internet navigation with Angular

I'm struggling to figure out how I can access the browsing history in Angular. In AngularJS, $location provided some functionality related to this, but in Angular, the Location service only offers forward and back methods without a way to view the ful ...

An extensive array of consequences and impacts tailored for a particular entity

As my Angular application continues to grow in size, the number of actions and effects also increases. How should I manage the growing action/effect files for a specific entity? I have attempted to separate actions into multiple files, but encountered an ...

Utilizing Variables in TypeScript to Enhance String Literal Types

Here are my codes: export const LOAD_USERS = 'LOAD_USERS'; export const CREATE_USER = 'CREATE_USER'; export interface ACTION { type: string, payload: any } I am trying to limit the possible values for ACTION.type to either 'L ...

Exploring the world of Typescript and Angular Filter functionalities

I am looking to utilize one of my Angular Filters in my controller as a function. I came across a solution on this page: How to use a filter in a controler The last answer provided exactly what I needed, so I implemented it in my JS code: var MyFunc ...

Troubleshooting Angular 4: Dealing with a 404 Error when Trying to Fetch a JSON File using HTTP GET and

I'm currently facing an issue with my application where I have a local json file and I am trying to read it using the Http get method. However, I am getting an exception (404) on the console. I found out that when using webpack, assets/data are not av ...

Retrieving variables from JavaScript files in TypeScript

Greetings, I am in the process of upgrading an existing Angular application from version 2 to 9. My approach involves first moving it to angular 4 and then continuing with the upgrades. I have successfully updated the necessary packages, but now I'm e ...

Customizing table header sort icons in PrimeNG 15.4+: A step-by-step guide

The most recent update in PrimeNG brought about a change in the way sort icons are implemented. Previously, they used an i tag with CSS classes which could be customized easily using my company's icons: https://i.sstatic.net/f0Nrq.png However, the n ...

create parameters for the angular properties of chemical functions

I have two functions that clear cancer and reproductive dropdowns individually. Now, I want to combine these functions into a parametrized function that takes a chemical input: clearDropdown(chemical) { switch (chemical) { case 'cancer& ...

Tips for effectively implementing a type guard while iterating through nested arrays

When iterating through an array, it is necessary to distinguish between two potential types of elements: either each element is a string, or each element is an array of strings. function _addDataAtIndex( totalData: Array<string | string[]>, ...

What is the process for configuring Angular to recognize my SSL certificates?

I'm having trouble getting my angular application to use the key and certificate I created. I placed both files in a directory named "ssl." However, when I run "ng serve" for the first time, Angular generates its own keys (it was mentioned in the ter ...