Adding a new column in Angular

Question

I have:

export class Column {
constructor(public name: string, public tasks: string[]) {} }

and

import { Column } from './column.model';

export class Board {
constructor(public name: string, public columns: Column[]) {}}

Here is my typescript code:

     import { Component, OnInit } from '@angular/core';
    import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
    import { Board } from 'src/app/models/board.model';
    import { Column } from 'src/app/models/column.model';
    
    @Component({
      selector: 'app-main-view',
      templateUrl: './main-view.component.html',
      styleUrls: ['./main-view.component.scss']
    })
    export class MainViewComponent implements OnInit {
    newcolumn: string;
      constructor() { }
    
      board: Board = new Board('Test Board', [
        new Column('First', [
          "one",
          "two"
        ])
      ]);
    
      ngOnInit() {
      }
    
      drop(event: CdkDragDrop<string[]>) {
        if (event.previousContainer === event.container) {
          moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
        } else {
          transferArrayItem(event.previousContainer.data,
            event.container.data,
            event.previousIndex,
            event.currentIndex);
        }
      }
  addColumn() {
    this.board.columns.push(this.newcolumn);
  }
    
    }

Error: Property 'name' does not exist on type 'Column[]

I have trouble with adding a function that adds a new column to my board. There is also a bug when using board.column.name. Please help. I've been trying to do this for several hours.

I don't know your model but here are the things that I find weird : 1) `newcolumn` is declared as a `string` but you are using it as if it was a `Column`. 2) `board.column.name` does not make sense to me. The board might have multiple columns so something like this seems more logical : `board.columns[0].name` — Arnaud Denoyelle, Mar 24 '21 at 17:41
code for Board and Column are in my post. Everything here, but without the addColumn function: https://github.com/Devstackr/kanban-angular-layout — Pusi, Mar 24 '21 at 17:47
`this.board.columns` is a `Column[]` and `this.newcolumn` is a `string` so it does not make sense to write `this.board.columns.push(this.newcolumn);`. Something like `this.board.columns.push(new Column('Name', []));` should be fine. — Arnaud Denoyelle, Mar 24 '21 at 18:12
@ArnaudDenoyelle thanks :) Do you have any idea for adding a task to an existing column? — Pusi, Mar 24 '21 at 18:21
In your model, a task is a `string`. So you can take the column you want and add a task. `board.columns[0].tasks.push('Test')`. — Arnaud Denoyelle, Mar 24 '21 at 18:50
@ArnaudDenoyelle okay, but can i skip typing the column id and automatically get this ? — Pusi, Mar 24 '21 at 19:10
`board.columns` is an array of columns so you have to tell on which one you want to add the task. But if you want to add the tasks on the column you just created, you can also do it like this : `const column = new Column('Name', []); column.tasks.push('Yolo'); this.board.columns.push(column)`; — Arnaud Denoyelle, Mar 24 '21 at 19:15
@ArnaudDenoyelle In my project, a button activates addColumn and another button activates addTask. I would like to create adding tasks to specific columns. — Pusi, Mar 24 '21 at 19:22
You have to use the index of the column. See [this answer](https://stackoverflow.com/questions/35405618/ngfor-with-index-as-value-in-attribute#answer-35405648) to see how to get the index. The important part is `let i = index` — Arnaud Denoyelle, Mar 24 '21 at 19:59

Adding a new column in Angular

0 Answers0