🐈

Nya NyaGarcia

🐈

Full stack dev~ Creator of Npkill~ Málaga

NyaGarcia / todo-list.component.ts

Created September 3, 2021 18:41

Adding drop method

	import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
	import { Component, OnInit } from '@angular/core';

	@Component({
	selector: 'app-todo-list',
	templateUrl: './todo-list.component.html',
	styleUrls: ['./todo-list.component.css'],
	})
	export class TodoListComponent implements OnInit {
	constructor() {}

NyaGarcia / todo-list.component.html

Created September 3, 2021 18:40

Adding the cdkDropListDropped event

	<div cdkDropList class="todo-list" (cdkDropListDropped)="drop($event)">
	<h3>TO DO</h3>
	<div class="awesome-todo" *ngFor="let todo of todos" cdkDrag>{{todo}}</div>
	</div>

NyaGarcia / todo-list.component.html

Last active September 3, 2021 18:40

cdkDropList element containing cdkDrag draggable elements

	<div cdkDropList class="todo-list">
	<h3>TO DO</h3>
	<div class="awesome-todo" *ngFor="let todo of todos" cdkDrag>{{todo}}</div>
	</div>

NyaGarcia / todo-list.component.ts

Created September 3, 2021 18:19

Defining an array of todos in the todo-list component

	import { Component, OnInit } from '@angular/core';

	@Component({
	selector: 'app-todo-list',
	templateUrl: './todo-list.component.html',
	styleUrls: ['./todo-list.component.css'],
	})
	export class TodoListComponent implements OnInit {
	constructor() {}

NyaGarcia / app.component.css

Created September 3, 2021 16:25

Awesome draggable div CSS rules

	.awesome-div {
	align-items: center;
	background-color: #00b2a7;
	border-radius: 4px;
	box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
	0 1px 5px 0 rgba(0, 0, 0, 0.12);
	color: #fff;
	cursor: move;
	display: flex;
	font-weight: bold;

NyaGarcia / app.component.html

Created September 3, 2021 12:07

Creating a draggable div in the app.component.html

	<div class="awesome-div" cdkDrag>
	Awesome draggable div
	</div>

NyaGarcia / app.module.ts

Created September 3, 2021 11:55

Importing the DragDropModule into the app.module

	import { AppComponent } from './app.component';
	import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
	import { BrowserModule } from '@angular/platform-browser';
	import { DragDropModule } from '@angular/cdk/drag-drop';
	import { NgModule } from '@angular/core';

	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, BrowserAnimationsModule, DragDropModule],
	providers: [],

NyaGarcia / pipe-scaffolding.ts

Created August 5, 2021 10:27

Pipe scaffolding generated by the ng g pipe command

	import { Pipe, PipeTransform } from '@angular/core';

	@Pipe({
	name: 'filterFalsy'
	})
	export class FilterFalsyPipe implements PipeTransform {

	transform(value: unknown, ...args: unknown[]): unknown {
	return null;
	}

NyaGarcia / uppercase-pipe.ts

Created April 28, 2021 17:00

Using the Angular UpperCasePipe

<h1>{{title | uppercase}}</h1>

NyaGarcia / filter-falsy.pipe.ts

Created April 27, 2021 22:05

Creating the filterFalsyPipe class

export class FilterFalsyPipe {}