In my journey to master Angular, I have taken on the challenge of building a clone of a todo-list application.
Here are the interfaces and components that I have defined for this project:
ListItem:
import { Step } from './step';
export interface ListItem {
id: number;
description: string;
done: boolean;
steps: Step[];
}
Step:
export interface Step {
description: string,
done: boolean
}
step.component.ts
import { Component, OnInit, Input } from '@angular/core';
import { ListItem } from '../listitem';
import { Step } from '../step';
import { StepService } from '../step.service';
@Component({
selector: 'app-step',
templateUrl: './step.component.html',
styleUrls: ['./step.component.css']
})
export class StepComponent implements OnInit {
@Input() listItem: ListItem;
constructor(private stepService: StepService) { }
ngOnInit(): void {
}
onSetStepDone(step: Step): void {
this.stepService.setStepDone(step);
}
}
step.component.html
<div class="section-item">
<span class="title">Steps</span>
<ul class="steps">
<li *ngFor="let step of listItem.steps">
<div class="steps-body">
<div *ngIf="step.done === true; else stepNotDone">
<div (click)="onSetStepDone(step)">
<span data-is-focusable="true" class="checkBox-sm completed big" role="checkbox" aria-checked="true" tabindex="0">
<i class="icon svgIcon ms-Icon checkbox-completed-20">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M10.9854 15.0752l-3.546-3.58 1.066-1.056 2.486 2.509 4.509-4.509 1.06 1.061-5.575 5.575zm1.015-12.075c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9z"></path>
</svg>
</i>
</span>
</div>
</div>
<button tabindex="0" class="steps-titleWrapper">
<span class="listItem-title" [class.done]="listItem.done == true">
{{step.description}}
</span>
</button>
</div>
</li>
</ul>
</div>
<ng-template #stepNotDone>
<div (click)="onSetStepDone(step)">
<span data-is-focusable="true" class="checkBox-sm big" role="checkbox" aria-checked="false" tabindex="0">
<i class="icon">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-17c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9"></path>
</svg>
</i>
<i class="icon checkBox-sm-hover">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<g fill-rule="evenodd">
<path d="M12 20c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m0-17c-4.963 0-9 4.037-9 9s4.037 9 9 9 9-4.037 9-9-4.037-9-9-9"></path>
<path d="M10.9902 13.3027l-2.487-2.51-.71.704 3.193 3.224 5.221-5.221-.707-.707z"></path>
</g>
</svg>
</i>
</span>
</div>
</ng-template>
Every time I attempt to run a test on step.component.spec.ts, an error is thrown indicating that the property "steps" cannot be read.
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { StepComponent } from './step.component';
describe('StepComponent', () => {
let component: StepComponent;
let fixture: ComponentFixture<StepComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ StepComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(StepComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
It seems like the line
<li *ngFor="let step of listItem.steps">Any help would be greatly appreciated!