Implementing Enqueue and Dequeue without built-in methods - arrays

Question

I have two functions one to dequeue and one to enqueue a user-inputted item from/to an array respectively.
What I know about queues
What I know about queues is pretty limited, I know they are similar to stacks but rather than being Last-In-First-Out (LIFO) as stacks are they are First-In-First-Out (FIFO) so basically whatever elements go into the array first will be taken out of the array first.
What I am trying right now
What I am trying to do right now is with the Enqueue button I am adding items to an array while incrementing the variable count by 1 with each push of the button so as to add each new user input to the next array position. In the dequeue function, I am setting each element of the dequeue array equal to each element of the original array by incrementing the dequeueCount variable.
What is the problem
The problem here is this, when I push the dequeue button I basically need to reindex everything so that after I dequeue an element the element at index 1, now takes the position index 0 and basically I always want to dequeue the item at element 0.
queue.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-queue',
templateUrl: './queue.component.html',
styleUrls: ['./queue.component.css']
})
export class QueueComponent implements OnInit {
#Input() userInput: String
array = []
arrayCount = 0
dequeueCount = 0
dequeueArray = []
dequeued = null
constructor() { }
ngOnInit() {
}
enQ() {
this.array[this.arrayCount++] = this.userInput;
}
deQ() {
deQ() {
if (this.arrayCount > 0) {
this.dequeueArray[this.dequeueCount++] = this.array[this.dequeueCount-1]
this.dequeued = this.dequeueArray[this.dequeueCount-1]
this.arrayCount--
}
else {
this.dequeued = "There is nothing else to dequeue"
}
}
}
and I am trying to show the current value of the array here
<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p *ngFor = "let item of array"> {{ array }} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued}} </p>
</div>
when I press the enqueue function everything seems to work correctly and a value is added to the array at the correct position so no problems with the enqueue function, however with the dequeue function, I need to somehow be able to dequeue the items and also remove the first item from the array and redisplay {{ array }} with the dequeued item removed.

Answer 1

Try the snippet, it should solve the problem.
import { Component } from "#angular/core";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
userInput: String;
array = [];
dequeued = [];
enQ() {
this.array.push(this.userInput);
}
deQ() {
if (this.array.length > 0) {
this.dequeued.push(this.array[this.array.length - 1]);
this.array.shift();
}
}
}
<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p> {{ array |json}} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued|json}} </p>
</div>
In your code you missing the pipe on dequeue variable, so when it hold the array the values will not be rendered by angular
Demo

Answer 2

I think your approach is complicated and vague, I made a new one based on your intention.
Even if this code doesn't match your needs, at least you can start from this one.
queue.component.ts
import { Component, Input } from "#angular/core";
#Component({
selector: "my-app",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
#Input() userInput;
array = [];
arrayCount = 0;
dequeuedCount = 0;
dequeued;
get queue() {
const q = [];
for (let i = this.dequeuedCount; i < this.arrayCount; i++) {
q[i - this.dequeuedCount] = this.array[i];
}
return q;
}
enQ() {
this.array[this.arrayCount++] = this.userInput;
}
deQ() {
if (this.arrayCount > this.dequeuedCount) {
this.dequeued = this.array[this.dequeuedCount++];
} else {
this.dequeued = "There is nothing else to dequeue";
}
}
}
queue.component.html
<div>
<label for="userInput">Input to Array:
<input [(ngModel)]="userInput" type="text">
</label><br>
<button (click)="enQ()">Enqueue</button>
<button (click)="deQ()">Dequeue</button>
<h3>Arrays</h3>
<p> {{ queue | json }} </p>
<h3>Dequeued Item</h3>
<p> {{ dequeued | json }} </p>
</div>
stackblitz: https://stackblitz.com/edit/angular-bt8ufd