Frontend (56) 썸네일형 리스트형 Angular Forms - Template-driven form Angular template-driven form provides easier way to handle form manipulations. In this writing, we will see how to use the template-driven form. Implementation First, add the forms module in the module file //scr/app/app.module.ts import { NgModule } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { BrowserModule } from '@angular/platform-browser'; import { AppRoutingM.. React React is the most popular framework followed by Angular and Vue. React, like Angular uses components to build an application. However, React does not come with native features like Angular. Instead, it uses other libraries which makes React compact and small in terms of size.Creating a React AppThe easiest way to create a new React app is to use the command below. Run the command in the terminal.. JS Component - Expanding Search Bar Implementaion First, let's add a search bar and a button in the HTML Add basic styles in the CSS /* main.css */ * { margin: 0; padding: 0; box-sizing: border-box; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background-color: lightcoral; } .input-box { position: relative; } input { height: 50px; width: 50px; border-radius: 15px; transition: 0.4s ease; font.. Angular Material - Adding Modules (module list) Angular Material is a UI component library provided by Angular. Let's see how to add the module to your angular project.Setting Up the LibraryOpen your project and run the command below (You can also use 'npm install' but 'ng add' automatically completes all the necessary configurations except for adding the module to the module file).ng add @angular/materialThen it will ask if you would like to.. Interface Interface is a class that defines attributes without initial values. It makes our life so much easier when we work with TypeScript as we can define a type once and use it across out application. How to Use It? Let's see how we can make the code below simpler using the interface. let object: { name: string; age: number; married?: boolean } = { name: 'tom', age: 20, } Create a interface of the obj.. TypeScript JavaScript, as you know, is a weakly typed language. While this feature allows you to write a code easily and freely, it also make the language prone to logic error whick is very hard to find. TypeScript is a superset of JavaScript. It includes all the features from JavaScript and has an additional feature, yep! you guessed right: type checking which makes it easier to find logic errors early in.. Angular Modal A modal refers to a popup or dialog in the Web development. It is possible to implement a modal with Vanilla JavaScript (An application made only with HTML, CSS, and JS). But Angular provides additional features that make sharing the status of a modal between components easy and help reduce repetition of codes. With that said, let's see one way of implementing the modal using Angular. First let'.. What is Angular? Developing a front end application using Vanilla JavaScript can become tedious and unproductive as the size of the application grows because anything that needs to be in the template should be written by the developer. Angular is a JavaScript framework that is packed with powerful features such as routing, forms validation, animations and rich libraries. Let’s have a look at how it started and s.. 이전 1 ··· 4 5 6 7 다음
