Toby Rogers

Toby Rogers

1564129965

Svelte for Angular Developers

A simple introduction to Svelte from an Angular developer’s perspective

Svelte is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.

Svelte will likely appear as a radically different approach from what you’ve seen before, and that’s probably a good thing.

Svelte will impress you for mainly two things: its speed, and its simplicity. In this article, we’ll focus on the latter.

As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do Angular things — but with Svelte.

Note: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.

Spoiler Alert: Svelte is fun.

Components

In Svelte every component corresponds to its relative file: for instance, the component Button will be created by naming its file Button.svelte. Of course, we normally do the same in Angular, but it is purely a convention.

Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.

Let’s create a dead-simple component that renders “Hello World”.

Importing Components

This is mostly the same as if you were importing a JS file, with an only difference:

  • you need to explicitly reference the components with the .svelte extension
  • it’s important to notice that you will need to import Svelte components from within the script section
<script>
  import Todo from './Todo.svelte';
</script><Todo></Todo>

It is clear from the snippets above that the number of lines to create a component in Svelte is incredibly low. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played.

Basic Syntax 📕Interpolations

Interpolations in Svelte are more similar to React than they are to Vue or Angular:

<script>
  let someFunction = () => {...}</script><span>{ 3 + 5 }</span>
<span>{ someFunction() }</span>
<span>{ someFunction() ? 0 : 1 }</span>

I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me.

Attributes

Passing attributes to components is also fairly easy, there’s no need for quotes and can even be Javascript expressions:

// Svelte
<script>
  let isFormValid = true;
</script><button disabled={!isFormValid}>Button</button>

Events

The syntax for listening to events is on:event={handler}.

<script>
  const onChange = (e) => console.log(e);
</script><input on:input={onChange} />

As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function:

<input on:input={(e) => onChange(e, ‘a’)} />

In terms of readability, I am in two minds:

  • typing less, as we do not need brackets and quotes, is always a good thing
  • readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased

Structural Directives

Contrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives:

{#if todos.length === 0}
  No todos created
{:else}
  {#each todos as todo}
    <Todo {todo} /> 
  {/each}
{/if}

I like this a lot. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky.

Inputs

Setting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is:

<script>
  export let todo = { name: '', done: false };
</script><p>
  { todo.name } { todo.done ? '✅' : '❌' }
</p>

  • As you may have noticed, we initialized todo with a value: that will be the default value if the consumer will not provide a value for the input

Next, we create the container component that will pass the data down:

<script>
 import Todo from './Todo.svelte'; const todos = [{
  name: "Learn Svelte",
  done: false
 },
 {
  name: "Learn Vue",
  done: false
 }];
</script>{#each todos as todo}
  <Todo todo={todo}></Todo>
{/each}

Similarly to plain JS, todo={todo} can be shortened and written as follows:

<Todo {todo}></Todo>

At first, I thought it was crazy, and now I think it is genial.

Outputs

To create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher.

  • We import the function createEventDispatcher and assign its return value to a variable called dispatch
  • We call dispatch with two arguments: its name, and its payload (or “detail”)
  • Notice: we add a function on click events (on:click) that will call the function markDone
<script>
 import { createEventDispatcher } from 'svelte'; export let todo;
 
 const dispatch = createEventDispatcher();
 
 function markDone() {
  dispatch('done', todo.name); 
 }
</script><p>
 { todo.name } { todo.done ? '✅' : '❌' } 
 
 <button on:click={markDone}>Mark done</button>
</p>

The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”:

  • we create a function called onDone
  • we assign the function to the component’s event that we called done.
  • The syntax is on:done={onDone}
<script>
 import Todo from './Todo.svelte';
 
 let todos = [{
  name: "Learn Svelte",
  done: false
 },
 {
  name: "Learn Vue",
  done: false
 }];
 
 function onDone(event) {
  const name = event.detail;todos = todos.map((todo) => {
   return todo.name === name ? {...todo, done: true} : todo;
  });
 }
</script>{#each todos as todo}
  <Todo {todo} on:done={onDone}></Todo>
{/each}

Notice: to trigger a change detection, we do not mutate the object. Instead, we reassign the array todos and replace the todo marked as done.

That is why Svelte is considered truly reactive: by simply reassigning the variable, the view will re-render accordingly.

ngModel

Svelte provides a special syntax bind:<prop>={value} for binding certain variables to a component’s attributes and keep them in sync.

In different words, it allows for two-way data binding:

<script>
  let name = "";
  let description = "";  function submit(e) {  // submit }
</script><form on:submit={submit}>
  <div>
    <input placeholder="Name" bind:value={name} />
  </div>  <div> 
    <input placeholder="Description" bind:value={description} />
  </div>  <button>Add Todo</button>
</form>

Reactive Statements

As we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.

For instance, let’s create a variable that will display whether all the todos have been checked:

let allDone = todos.every(({ done }) => done);

Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”:

$: allDone = todos.every(({ done }) => done);

Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are valid Javascript?

Let’s take a look at a demo:

Content Projection

Content Projection also uses slots, which means you can name a slot and project it wherever you want within your component.

To simply interpolate all the content passed as content to your component, you can simply use the special element slot:

// Button.svelte
<script>
    export let type;
</script><button class.type={type}>
 <slot></slot>
</button>// App.svelte
<script>
  import Button from './Button.svelte';
</script><Button>
  Submit
</Button>

As you can see, the string “Submit” will take the place of <slot></slot>. Named slots require us to assign a name to a slot:

// Modal.svelte
<div class='modal'>
 <div class="modal-header">
  <slot name="header"></slot>
 </div>
 
 <div class="modal-body">
  <slot name="body"></slot>
 </div>
</div>// App.svelte
<script>
  import Modal from './Modal.svelte';
</script><Modal>
 <div slot="header">
  Header
 </div>
 
 <div slot="body">
  Body
 </div>
</Modal>

Lifecycle Hooks

Svelte provides 4 lifecycle hooks, that are imported from the svelte package.

  • onMount, a callback that runs when the component gets mounted
  • beforeUpdate, a callback that runs before the components updates
  • afterUpdate, a callback that runs after the components updates
  • onDestroy, a callback that runs when the component gets destroyed

onMount is a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated to ngOnInit.

If you return a function from the callback, this will be called when the component is unmounted.

<script>import { 
  onMount, 
  beforeUpdate, 
  afterUpdate, 
  onDestroy 
} from 'svelte';onMount(() => console.log('Mounted', todo));
afterUpdate(() => console.log('Updated', todo));
beforeUpdate(() => console.log('Going to be updated', todo));
onDestroy(() => console.log('Destroyed', todo));</script>

💡It’s important to notice that when onMount is called, its inputs have already been initialized. That means, todo is already defined when we log it in the snippet above.

State Management

State Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.

Writable Store

The first thing we can do is to import writable from the package svelte/store and pass to the function the initial state

import { writable } from 'svelte/store';const initialState = [{
  name: "Learn Svelte",
  done: false
},
{
  name: "Learn Vue",
  done: false
}];
 
const todos = writable(initialState);

Normally, I’d store this in a file called todos.store.js and export the writable store so that the container component can update it.

As you may have noticed, todos is now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic:

  • by prepending the store name with [Svelte](https://morioh.com/p/5f219338d813 "Svelte") is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as **a radically different approach** from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: **its speed, and its simplicity**. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do *Angular* things — but with *Svelte.***Note**: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.**Spoiler Alert**: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the componentButtonwill be created by naming its fileButton.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”.![](https://miro.medium.com/max/700/1*WS1eWXq_DLo2_yp6X9lZtA.png) ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelteextension * it’s important to notice that you will need to import Svelte components from within thescript section It is clear from the snippets above that **the number of lines to create a component in Svelte is incredibly low**. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to [React](https://morioh.com/p/a336b65c0cb7 "React") than they are to [Vue or Angular](https://morioh.com/p/556b2b68dc38 "Vue or Angular"): { 3 + 5 } { someFunction() } { someFunction() ? 0 : 1 }I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be [Javascript](https://morioh.com/p/b7dd9c1d345f "Javascript") expressions: // Svelte ## EventsThe syntax for listening to events ison:event={handler}. As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}**I like this a lot**. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is:

    { todo.name } { todo.done ? ‘✅’ : ‘❌’ }

    * As you may have noticed, we initializedtodo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: {#each todos as todo} {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcherand assign its return value to a variable calleddispatch* We calldispatch with two arguments: its name, and its payload (or “detail”) * **Notice**: we add a function on click events (on:click) that will call the function markDone <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>```The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called ```onDone``` * we assign the function to the component’s event that we called ```done```. * The syntax is ```on:done={onDone} {#each todos as todo}<Todo {todo} on:done={onDone}> {/each}**Notice**: to trigger a *change detection*, we **do not mutate the object**. Instead, we reassign the array todosand replace the todo marked as done.**That is why Svelte is considered truly *reactive***: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntaxbind:={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding:
    ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all thetodos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are **valid Javascript**?Let’s take a look at a demo:![](https://miro.medium.com/max/700/1*EhAvR-2pEqlpTXZewxjWhw.gif) ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte // App.svelte As you can see, the string “Submit” will take the place of . *Named slots* require us to assign a name to a slot: // Modal.svelte // App.svelte
    Header
    Body
    ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from thesvelte package. * **onMount**, a callback that runs when the component gets mounted * **beforeUpdate**, a callback that runs **before** the components updates * **afterUpdate**, a callback that runs **after** the components updates * **onDestroy**, a callback that runs when the component gets destroyedonMountis a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated tongOnInit.If you return a function from the callback, this will be called when the component is unmounted. 💡It’s important to notice that when onMountis called, its inputs have already been initialized. That means,todois already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.**Writable Store**The first thing we can do is to importwritablefrom the packagesvelte/store and pass to the function the initial state import { writable } from ‘svelte/store’;const initialState = [{name: “Learn Svelte”,done: false }, {name: “Learn Vue”,done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.jsand export the writable store so that the container component can update it.As you may have noticed,todosis now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with `` we can directly access the value of the store!💡That means, all the references totodoswill now be$todos: {#each $todos as todo} {/each}**Setting State**A writable store’s state can be set by calling the method set which will imperatively set the state to the value passed: const todos = writable(initialState);function removeAll() {todos.set([]); }**Updating State**To update the store based on the current state, in our case the todosstore, we can call the functionupdateto which we pass a [callback](https://morioh.com/p/bb2f95f40ce3 "callback"). The return value of the callback will be the new state passed to the store:Let’s rewrite the functiononDone that we defined above: function onDone(event) {const name = event.detail; todos.update((state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});});}Alright, I know, I wrote a reducer in the component. Not cool, you’re saying. Let’s move that to the store file, and export a function that simply takes care of updating the state. // todos.store.jsexport function markTodoAsDone(name) {const updateFn = (state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});}); todos.update(updateFn); }// App.svelteimport { markTodoAsDone } from ‘./todos.store’;function onDone(event) {const name = event.detail;markTodoAsDone(name); }**Listening to value changes**We can use the method .subscribe to listen to value changes from a store, . Notice, though, that the store is not an observable although the interface looks similar. const subscription = todos.subscribe(console.log);subscription(); // unsubscribe subscription by calling it💡 Svelte’s store package also provides two more utilities called readableandderivable. ## ObservablesOh, the part you were waiting for! You’ll be delighted to know that Svelte recently added support for [RxJS](https://morioh.com/p/fcfea9850b90 "RxJS") and the [ECMAScript](https://morioh.com/p/1fc48f776dd0 "ECMAScript") Observable proposal.As an Angular developer, I am quite used to working with reactive programming and not having something like the async pipe would be a bummer. But Svelte surprised me once again.Let’s see how the two can work together: we’ll render a list of repositories from [Github](https://morioh.com/p/413d0783c235 "Github") searched with the keyword “Svelte”.You can paste the snippet below in the Svelte REPL and it will just work: {#each $repos$ as repo} {/each}// Angular’s implementation <div *ngFor=“let repo of (repos$ | async)><a [attr.href]=”{{ repo.url }}“>{{ repo.name }} As you may have noticed, I prefixed the observable reposSvelte is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as a radically different approach from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: its speed, and its simplicity. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do Angular things — but with *Svelte.*Note: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.Spoiler Alert: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the component Button will be created by naming its file Button.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”. ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelte extension * it’s important to notice that you will need to import Svelte components from within the script section <script>import Todo from './Todo.svelte'; </script><Todo></Todo>It is clear from the snippets above that the number of lines to create a component in Svelte is incredibly low. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to React than they are to Vue or Angular: <script>let someFunction = () => {...}</script><span>{ 3 + 5 }</span> <span>{ someFunction() }</span> <span>{ someFunction() ? 0 : 1 }</span>I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be Javascript expressions: // Svelte <script>let isFormValid = true; </script><button disabled={!isFormValid}>Button</button> ## EventsThe syntax for listening to events is on:event={handler}. <script>const onChange = (e) => console.log(e); </script><input on:input={onChange} />As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}I like this a lot. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is: <script>export let todo = { name: '', done: false }; </script><p>{ todo.name } { todo.done ? '✅' : '❌' } </p> * As you may have noticed, we initialized todo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: <script>import Todo from './Todo.svelte'; const todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}]; </script>{#each todos as todo}<Todo todo={todo}></Todo> {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}></Todo>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcher and assign its return value to a variable called dispatch * We call dispatch with two arguments: its name, and its payload (or “detail”) * Notice: we add a function on click events (on:click) that will call the function markDone`````` <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called onDone * we assign the function to the component’s event that we called done. * The syntax is on:done={onDone}`````` <script>import Todo from './Todo.svelte';let todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}];function onDone(event) {const name = event.detail;todos = todos.map((todo) => {return todo.name === name ? {...todo, done: true} : todo;});} </script>{#each todos as todo}<Todo {todo} on:done={onDone}></Todo> {/each}Notice: to trigger a change detection, we do not mutate the object. Instead, we reassign the array todos and replace the todo marked as done.That is why Svelte is considered truly reactive: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntax bind:<prop>={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding: <script>let name = "";let description = ""; function submit(e) { // submit } </script><form on:submit={submit}><div><input placeholder="Name" bind:value={name} /></div> <div> <input placeholder="Description" bind:value={description} /></div> <button>Add Todo</button> </form> ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all the todos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are valid Javascript?Let’s take a look at a demo: ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte <script>export let type; </script><button class.type={type}><slot></slot> </button>// App.svelte <script>import Button from './Button.svelte'; </script><Button>Submit </Button>As you can see, the string “Submit” will take the place of <slot></slot>. Named slots require us to assign a name to a slot: // Modal.svelte <div class='modal'><div class="modal-header"><slot name="header"></slot></div><div class="modal-body"><slot name="body"></slot></div> </div>// App.svelte <script>import Modal from './Modal.svelte'; </script><Modal><div slot="header">Header</div><div slot="body">Body</div> </Modal> ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from the svelte package. * onMount, a callback that runs when the component gets mounted * beforeUpdate, a callback that runs before the components updates * afterUpdate, a callback that runs after the components updates * onDestroy, a callback that runs when the component gets destroyedonMount is a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated to ngOnInit.If you return a function from the callback, this will be called when the component is unmounted. <script>import { onMount, beforeUpdate, afterUpdate, onDestroy} from 'svelte';onMount(() => console.log('Mounted', todo)); afterUpdate(() => console.log('Updated', todo)); beforeUpdate(() => console.log('Going to be updated', todo)); onDestroy(() => console.log('Destroyed', todo));</script>💡It’s important to notice that when onMount is called, its inputs have already been initialized. That means, todo is already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.Writable StoreThe first thing we can do is to import writable from the package svelte/store and pass to the function the initial state import { writable } from 'svelte/store';const initialState = [{name: "Learn Svelte",done: false }, {name: "Learn Vue",done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.js and export the writable store so that the container component can update it.As you may have noticed, todos is now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with [Svelte](https://morioh.com/p/5f219338d813 "Svelte") is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as **a radically different approach** from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: **its speed, and its simplicity**. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do *Angular* things — but with *Svelte.***Note**: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.**Spoiler Alert**: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the componentButtonwill be created by naming its fileButton.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”.![](https://miro.medium.com/max/700/1*WS1eWXq_DLo2_yp6X9lZtA.png) ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelteextension * it’s important to notice that you will need to import Svelte components from within thescript section It is clear from the snippets above that **the number of lines to create a component in Svelte is incredibly low**. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to [React](https://morioh.com/p/a336b65c0cb7 "React") than they are to [Vue or Angular](https://morioh.com/p/556b2b68dc38 "Vue or Angular"): { 3 + 5 } { someFunction() } { someFunction() ? 0 : 1 }I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be [Javascript](https://morioh.com/p/b7dd9c1d345f "Javascript") expressions: // Svelte ## EventsThe syntax for listening to events ison:event={handler}. As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}**I like this a lot**. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is:

    { todo.name } { todo.done ? ‘✅’ : ‘❌’ }

    * As you may have noticed, we initializedtodo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: {#each todos as todo} {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcherand assign its return value to a variable calleddispatch* We calldispatch with two arguments: its name, and its payload (or “detail”) * **Notice**: we add a function on click events (on:click) that will call the function markDone <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>```The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called ```onDone``` * we assign the function to the component’s event that we called ```done```. * The syntax is ```on:done={onDone} {#each todos as todo}<Todo {todo} on:done={onDone}> {/each}**Notice**: to trigger a *change detection*, we **do not mutate the object**. Instead, we reassign the array todosand replace the todo marked as done.**That is why Svelte is considered truly *reactive***: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntaxbind:={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding:
    ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all thetodos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are **valid Javascript**?Let’s take a look at a demo:![](https://miro.medium.com/max/700/1*EhAvR-2pEqlpTXZewxjWhw.gif) ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte // App.svelte As you can see, the string “Submit” will take the place of . *Named slots* require us to assign a name to a slot: // Modal.svelte // App.svelte
    Header
    Body
    ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from thesvelte package. * **onMount**, a callback that runs when the component gets mounted * **beforeUpdate**, a callback that runs **before** the components updates * **afterUpdate**, a callback that runs **after** the components updates * **onDestroy**, a callback that runs when the component gets destroyedonMountis a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated tongOnInit.If you return a function from the callback, this will be called when the component is unmounted. 💡It’s important to notice that when onMountis called, its inputs have already been initialized. That means,todois already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.**Writable Store**The first thing we can do is to importwritablefrom the packagesvelte/store and pass to the function the initial state import { writable } from ‘svelte/store’;const initialState = [{name: “Learn Svelte”,done: false }, {name: “Learn Vue”,done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.jsand export the writable store so that the container component can update it.As you may have noticed,todosis now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with `` we can directly access the value of the store!💡That means, all the references totodoswill now be$todos: {#each $todos as todo} {/each}**Setting State**A writable store’s state can be set by calling the method set which will imperatively set the state to the value passed: const todos = writable(initialState);function removeAll() {todos.set([]); }**Updating State**To update the store based on the current state, in our case the todosstore, we can call the functionupdateto which we pass a [callback](https://morioh.com/p/bb2f95f40ce3 "callback"). The return value of the callback will be the new state passed to the store:Let’s rewrite the functiononDone that we defined above: function onDone(event) {const name = event.detail; todos.update((state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});});}Alright, I know, I wrote a reducer in the component. Not cool, you’re saying. Let’s move that to the store file, and export a function that simply takes care of updating the state. // todos.store.jsexport function markTodoAsDone(name) {const updateFn = (state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});}); todos.update(updateFn); }// App.svelteimport { markTodoAsDone } from ‘./todos.store’;function onDone(event) {const name = event.detail;markTodoAsDone(name); }**Listening to value changes**We can use the method .subscribe to listen to value changes from a store, . Notice, though, that the store is not an observable although the interface looks similar. const subscription = todos.subscribe(console.log);subscription(); // unsubscribe subscription by calling it💡 Svelte’s store package also provides two more utilities called readableandderivable. ## ObservablesOh, the part you were waiting for! You’ll be delighted to know that Svelte recently added support for [RxJS](https://morioh.com/p/fcfea9850b90 "RxJS") and the [ECMAScript](https://morioh.com/p/1fc48f776dd0 "ECMAScript") Observable proposal.As an Angular developer, I am quite used to working with reactive programming and not having something like the async pipe would be a bummer. But Svelte surprised me once again.Let’s see how the two can work together: we’ll render a list of repositories from [Github](https://morioh.com/p/413d0783c235 "Github") searched with the keyword “Svelte”.You can paste the snippet below in the Svelte REPL and it will just work: {#each $repos$ as repo} {/each}// Angular’s implementation <div *ngFor=“let repo of (repos$ | async)><a [attr.href]=”{{ repo.url }}”>{{ repo.name }} As you may have noticed, I prefixed the observable `` with Svelte is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as a radically different approach from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: its speed, and its simplicity. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do Angular things — but with *Svelte.*Note: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.Spoiler Alert: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the component Button will be created by naming its file Button.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”. ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelte extension * it’s important to notice that you will need to import Svelte components from within the script section <script>import Todo from './Todo.svelte'; </script><Todo></Todo>It is clear from the snippets above that the number of lines to create a component in Svelte is incredibly low. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to React than they are to Vue or Angular: <script>let someFunction = () => {...}</script><span>{ 3 + 5 }</span> <span>{ someFunction() }</span> <span>{ someFunction() ? 0 : 1 }</span>I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be Javascript expressions: // Svelte <script>let isFormValid = true; </script><button disabled={!isFormValid}>Button</button> ## EventsThe syntax for listening to events is on:event={handler}. <script>const onChange = (e) => console.log(e); </script><input on:input={onChange} />As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}I like this a lot. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is: <script>export let todo = { name: '', done: false }; </script><p>{ todo.name } { todo.done ? '✅' : '❌' } </p> * As you may have noticed, we initialized todo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: <script>import Todo from './Todo.svelte'; const todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}]; </script>{#each todos as todo}<Todo todo={todo}></Todo> {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}></Todo>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcher and assign its return value to a variable called dispatch * We call dispatch with two arguments: its name, and its payload (or “detail”) * Notice: we add a function on click events (on:click) that will call the function markDone`````` <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called onDone * we assign the function to the component’s event that we called done. * The syntax is on:done={onDone}`````` <script>import Todo from './Todo.svelte';let todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}];function onDone(event) {const name = event.detail;todos = todos.map((todo) => {return todo.name === name ? {...todo, done: true} : todo;});} </script>{#each todos as todo}<Todo {todo} on:done={onDone}></Todo> {/each}Notice: to trigger a change detection, we do not mutate the object. Instead, we reassign the array todos and replace the todo marked as done.That is why Svelte is considered truly reactive: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntax bind:<prop>={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding: <script>let name = "";let description = ""; function submit(e) { // submit } </script><form on:submit={submit}><div><input placeholder="Name" bind:value={name} /></div> <div> <input placeholder="Description" bind:value={description} /></div> <button>Add Todo</button> </form> ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all the todos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are valid Javascript?Let’s take a look at a demo: ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte <script>export let type; </script><button class.type={type}><slot></slot> </button>// App.svelte <script>import Button from './Button.svelte'; </script><Button>Submit </Button>As you can see, the string “Submit” will take the place of <slot></slot>. Named slots require us to assign a name to a slot: // Modal.svelte <div class='modal'><div class="modal-header"><slot name="header"></slot></div><div class="modal-body"><slot name="body"></slot></div> </div>// App.svelte <script>import Modal from './Modal.svelte'; </script><Modal><div slot="header">Header</div><div slot="body">Body</div> </Modal> ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from the svelte package. * onMount, a callback that runs when the component gets mounted * beforeUpdate, a callback that runs before the components updates * afterUpdate, a callback that runs after the components updates * onDestroy, a callback that runs when the component gets destroyedonMount is a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated to ngOnInit.If you return a function from the callback, this will be called when the component is unmounted. <script>import { onMount, beforeUpdate, afterUpdate, onDestroy} from 'svelte';onMount(() => console.log('Mounted', todo)); afterUpdate(() => console.log('Updated', todo)); beforeUpdate(() => console.log('Going to be updated', todo)); onDestroy(() => console.log('Destroyed', todo));</script>💡It’s important to notice that when onMount is called, its inputs have already been initialized. That means, todo is already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.Writable StoreThe first thing we can do is to import writable from the package svelte/store and pass to the function the initial state import { writable } from 'svelte/store';const initialState = [{name: "Learn Svelte",done: false }, {name: "Learn Vue",done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.js and export the writable store so that the container component can update it.As you may have noticed, todos is now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with [Svelte](https://morioh.com/p/5f219338d813 "Svelte") is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as **a radically different approach** from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: **its speed, and its simplicity**. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do *Angular* things — but with *Svelte.***Note**: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.**Spoiler Alert**: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the componentButtonwill be created by naming its fileButton.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”.![](https://miro.medium.com/max/700/1*WS1eWXq_DLo2_yp6X9lZtA.png) ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelteextension * it’s important to notice that you will need to import Svelte components from within thescript section It is clear from the snippets above that **the number of lines to create a component in Svelte is incredibly low**. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to [React](https://morioh.com/p/a336b65c0cb7 "React") than they are to [Vue or Angular](https://morioh.com/p/556b2b68dc38 "Vue or Angular"): { 3 + 5 } { someFunction() } { someFunction() ? 0 : 1 }I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be [Javascript](https://morioh.com/p/b7dd9c1d345f "Javascript") expressions: // Svelte ## EventsThe syntax for listening to events ison:event={handler}. As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}**I like this a lot**. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is:

    { todo.name } { todo.done ? ‘✅’ : ‘❌’ }

    * As you may have noticed, we initializedtodo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: {#each todos as todo} {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcherand assign its return value to a variable calleddispatch* We calldispatch with two arguments: its name, and its payload (or “detail”) * **Notice**: we add a function on click events (on:click) that will call the function markDone <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>```The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called ```onDone``` * we assign the function to the component’s event that we called ```done```. * The syntax is ```on:done={onDone} {#each todos as todo}<Todo {todo} on:done={onDone}> {/each}**Notice**: to trigger a *change detection*, we **do not mutate the object**. Instead, we reassign the array todosand replace the todo marked as done.**That is why Svelte is considered truly *reactive***: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntaxbind:={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding:
    ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all thetodos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are **valid Javascript**?Let’s take a look at a demo:![](https://miro.medium.com/max/700/1*EhAvR-2pEqlpTXZewxjWhw.gif) ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte // App.svelte As you can see, the string “Submit” will take the place of . *Named slots* require us to assign a name to a slot: // Modal.svelte // App.svelte
    Header
    Body
    ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from thesvelte package. * **onMount**, a callback that runs when the component gets mounted * **beforeUpdate**, a callback that runs **before** the components updates * **afterUpdate**, a callback that runs **after** the components updates * **onDestroy**, a callback that runs when the component gets destroyedonMountis a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated tongOnInit.If you return a function from the callback, this will be called when the component is unmounted. 💡It’s important to notice that when onMountis called, its inputs have already been initialized. That means,todois already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.**Writable Store**The first thing we can do is to importwritablefrom the packagesvelte/store and pass to the function the initial state import { writable } from ‘svelte/store’;const initialState = [{name: “Learn Svelte”,done: false }, {name: “Learn Vue”,done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.jsand export the writable store so that the container component can update it.As you may have noticed,todosis now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with `` we can directly access the value of the store!💡That means, all the references totodoswill now be$todos: {#each $todos as todo} {/each}**Setting State**A writable store’s state can be set by calling the method set which will imperatively set the state to the value passed: const todos = writable(initialState);function removeAll() {todos.set([]); }**Updating State**To update the store based on the current state, in our case the todosstore, we can call the functionupdateto which we pass a [callback](https://morioh.com/p/bb2f95f40ce3 "callback"). The return value of the callback will be the new state passed to the store:Let’s rewrite the functiononDone that we defined above: function onDone(event) {const name = event.detail; todos.update((state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});});}Alright, I know, I wrote a reducer in the component. Not cool, you’re saying. Let’s move that to the store file, and export a function that simply takes care of updating the state. // todos.store.jsexport function markTodoAsDone(name) {const updateFn = (state) => {return state.map((todo) => {return todo.name === name ? {…todo, done: true} : todo;});}); todos.update(updateFn); }// App.svelteimport { markTodoAsDone } from ‘./todos.store’;function onDone(event) {const name = event.detail;markTodoAsDone(name); }**Listening to value changes**We can use the method .subscribe to listen to value changes from a store, . Notice, though, that the store is not an observable although the interface looks similar. const subscription = todos.subscribe(console.log);subscription(); // unsubscribe subscription by calling it💡 Svelte’s store package also provides two more utilities called readableandderivable. ## ObservablesOh, the part you were waiting for! You’ll be delighted to know that Svelte recently added support for [RxJS](https://morioh.com/p/fcfea9850b90 "RxJS") and the [ECMAScript](https://morioh.com/p/1fc48f776dd0 "ECMAScript") Observable proposal.As an Angular developer, I am quite used to working with reactive programming and not having something like the async pipe would be a bummer. But Svelte surprised me once again.Let’s see how the two can work together: we’ll render a list of repositories from [Github](https://morioh.com/p/413d0783c235 "Github") searched with the keyword “Svelte”.You can paste the snippet below in the Svelte REPL and it will just work: {#each $repos$ as repo} {/each}// Angular’s implementation <div *ngFor=“let repo of (repos$ | async)><a [attr.href]=”{{ repo.url }}">{{ repo.name }} As you may have noticed, I prefixed the observable reposSvelte is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as a radically different approach from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: its speed, and its simplicity. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do Angular things — but with *Svelte.*Note: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.Spoiler Alert: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the component Button will be created by naming its file Button.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”. ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelte extension * it’s important to notice that you will need to import Svelte components from within the script section <script>import Todo from './Todo.svelte'; </script><Todo></Todo>It is clear from the snippets above that the number of lines to create a component in Svelte is incredibly low. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to React than they are to Vue or Angular: <script>let someFunction = () => {...}</script><span>{ 3 + 5 }</span> <span>{ someFunction() }</span> <span>{ someFunction() ? 0 : 1 }</span>I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be Javascript expressions: // Svelte <script>let isFormValid = true; </script><button disabled={!isFormValid}>Button</button> ## EventsThe syntax for listening to events is on:event={handler}. <script>const onChange = (e) => console.log(e); </script><input on:input={onChange} />As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}I like this a lot. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is: <script>export let todo = { name: '', done: false }; </script><p>{ todo.name } { todo.done ? '✅' : '❌' } </p> * As you may have noticed, we initialized todo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: <script>import Todo from './Todo.svelte'; const todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}]; </script>{#each todos as todo}<Todo todo={todo}></Todo> {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}></Todo>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcher and assign its return value to a variable called dispatch * We call dispatch with two arguments: its name, and its payload (or “detail”) * Notice: we add a function on click events (on:click) that will call the function markDone`````` <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called onDone * we assign the function to the component’s event that we called done. * The syntax is on:done={onDone}`````` <script>import Todo from './Todo.svelte';let todos = [{name: "Learn Svelte",done: false},{name: "Learn Vue",done: false}];function onDone(event) {const name = event.detail;todos = todos.map((todo) => {return todo.name === name ? {...todo, done: true} : todo;});} </script>{#each todos as todo}<Todo {todo} on:done={onDone}></Todo> {/each}Notice: to trigger a change detection, we do not mutate the object. Instead, we reassign the array todos and replace the todo marked as done.That is why Svelte is considered truly reactive: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntax bind:<prop>={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding: <script>let name = "";let description = ""; function submit(e) { // submit } </script><form on:submit={submit}><div><input placeholder="Name" bind:value={name} /></div> <div> <input placeholder="Description" bind:value={description} /></div> <button>Add Todo</button> </form> ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all the todos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are valid Javascript?Let’s take a look at a demo: ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte <script>export let type; </script><button class.type={type}><slot></slot> </button>// App.svelte <script>import Button from './Button.svelte'; </script><Button>Submit </Button>As you can see, the string “Submit” will take the place of <slot></slot>. Named slots require us to assign a name to a slot: // Modal.svelte <div class='modal'><div class="modal-header"><slot name="header"></slot></div><div class="modal-body"><slot name="body"></slot></div> </div>// App.svelte <script>import Modal from './Modal.svelte'; </script><Modal><div slot="header">Header</div><div slot="body">Body</div> </Modal> ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from the svelte package. * onMount, a callback that runs when the component gets mounted * beforeUpdate, a callback that runs before the components updates * afterUpdate, a callback that runs after the components updates * onDestroy, a callback that runs when the component gets destroyedonMount is a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated to ngOnInit.If you return a function from the callback, this will be called when the component is unmounted. <script>import { onMount, beforeUpdate, afterUpdate, onDestroy} from 'svelte';onMount(() => console.log('Mounted', todo)); afterUpdate(() => console.log('Updated', todo)); beforeUpdate(() => console.log('Going to be updated', todo)); onDestroy(() => console.log('Destroyed', todo));</script>💡It’s important to notice that when onMount is called, its inputs have already been initialized. That means, todo is already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.Writable StoreThe first thing we can do is to import writable from the package svelte/store and pass to the function the initial state import { writable } from 'svelte/store';const initialState = [{name: "Learn Svelte",done: false }, {name: "Learn Vue",done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.js and export the writable store so that the container component can update it.As you may have noticed, todos is now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: * by prepending the store name with [Svelte](https://morioh.com/p/5f219338d813 "Svelte") is a relatively recent framework for building UIs developed by Rich Harris, also the creator of Rollup.Svelte will likely appear as **a radically different approach** from what you’ve seen before, and that’s probably a good thing.Svelte will impress you for mainly two things: **its speed, and its simplicity**. In this article, we’ll focus on the latter.As my main expertise revolves around Angular, it is only normal that I try to learn it by replicating the approaches I’m used to with the former by using Svelte. And this is what this article is going to be about: how to do *Angular* things — but with *Svelte.***Note**: Although I will be expressing my preferences, this is not a comparison: it is a simple and quick introduction to Svelte for people who use Angular as a framework of choice.**Spoiler Alert**: Svelte is fun. ## ComponentsIn Svelte every component corresponds to its relative file: for instance, the componentButtonwill be created by naming its fileButton.svelte. Of course, we normally do the same in Angular, but it is purely a convention.Svelte components are written using a single-file convention, and it is made of 3 sections: script, style, and the template, which doesn’t have to be wrapped within its specific tag.Let’s create a dead-simple component that renders “Hello World”.![](https://miro.medium.com/max/700/1*WS1eWXq_DLo2_yp6X9lZtA.png) ## Importing ComponentsThis is mostly the same as if you were importing a JS file, with an only difference: * you need to explicitly reference the components with the .svelteextension * it’s important to notice that you will need to import Svelte components from within thescript section It is clear from the snippets above that **the number of lines to create a component in Svelte is incredibly low**. There’s a lot of implicitness and constraints there, of course, yet it is simple enough to get quickly used to it. Nicely played. ## Basic Syntax 📕InterpolationsInterpolations in Svelte are more similar to [React](https://morioh.com/p/a336b65c0cb7 "React") than they are to [Vue or Angular](https://morioh.com/p/556b2b68dc38 "Vue or Angular"): { 3 + 5 } { someFunction() } { someFunction() ? 0 : 1 }I am quite used to typing twice the curly brackets that sometimes I make simple mistakes, but that’s just me. ## AttributesPassing attributes to components is also fairly easy, there’s no need for quotes and can even be [Javascript](https://morioh.com/p/b7dd9c1d345f "Javascript") expressions: // Svelte ## EventsThe syntax for listening to events ison:event={handler}. As you may notice, opposite to Angular we don’t need to call the functions using parenthesis. To pass arguments to the function with could simply define an anonymous function: <input on:input={(e) => onChange(e, ‘a’)} />In terms of readability, I am in two minds: * typing less, as we do not need brackets and quotes, is always a good thing * readability-wise, I always liked Angular better than React, and as a result, to me is slightly more readable than Svelte. With that said, once again, I am very used to it and therefore my view here is biased ## Structural DirectivesContrary to Vue and Angular, Svelte provides a special syntax for looping and control flow within templates rather than using structural directives: {#if todos.length === 0}No todos created {:else}{#each todos as todo}<Todo {todo} /> {/each} {/if}**I like this a lot**. No need to create HTML nodes, and readability-wise it does look awesome. Unfortunately my Macbook’s UK keyboard places # in a difficult to-reach-spot, which is making my experience with it a bit clunky. ## InputsSetting and getting properties (or @Input) from other components is as easy as exporting a constant from a script. Alright, that can be confusing — let’s write an example and see how easy it is:

    { todo.name } { todo.done ? ‘✅’ : ‘❌’ }

    * As you may have noticed, we initializedtodo with a value: that will be the default value if the consumer will not provide a value for the inputNext, we create the container component that will pass the data down: {#each todos as todo} {/each}Similarly to plain JS, todo={todo} can be shortened and written as follows: <Todo {todo}>At first, I thought it was crazy, and now I think it is genial. ## OutputsTo create an@Output, i.e. a notification from child components to their parents, we will be using Svelte’s createEventDispatcher. * We import the function createEventDispatcherand assign its return value to a variable calleddispatch* We calldispatch with two arguments: its name, and its payload (or “detail”) * **Notice**: we add a function on click events (on:click) that will call the function markDone <script>import { createEventDispatcher } from 'svelte'; export let todo;const dispatch = createEventDispatcher();function markDone() {dispatch('done', todo.name); } </script><p>{ todo.name } { todo.done ? '✅' : '❌' } <button on:click={markDone}>Mark done</button> </p>```The container component will need to provide a callback for the event dispatched, so that we can mark that todo object as “done”: * we create a function called ```onDone``` * we assign the function to the component’s event that we called ```done```. * The syntax is ```on:done={onDone} {#each todos as todo}<Todo {todo} on:done={onDone}> {/each}**Notice**: to trigger a *change detection*, we **do not mutate the object**. Instead, we reassign the array todosand replace the todo marked as done.**That is why Svelte is considered truly *reactive***: by simply reassigning the variable, the view will re-render accordingly. ## ngModelSvelte provides a special syntaxbind:={value} for binding certain variables to a component’s attributes and keep them in sync.In different words, it allows for two-way data binding:
    ## Reactive StatementsAs we’ve seen before, Svelte reacts to an assignment and re-renders the view. To react to a change from another value, we can use reactive statements so that another value can automatically change in its turn.For instance, let’s create a variable that will display whether all thetodos have been checked: let allDone = todos.every(({ done }) => done);Unfortunately, though, the view will not be rendered because we never reassign allDone. Let’s replace this with a reactive statement, that makes us of Javascript “labels”: $: allDone = todos.every(({ done }) => done);Oh! That’s exotic. And before you shout “that’s too magic!”: did you know that labels are **valid Javascript**?Let’s take a look at a demo:![](https://miro.medium.com/max/700/1*EhAvR-2pEqlpTXZewxjWhw.gif) ## Content ProjectionContent Projection also uses slots, which means you can name a slot and project it wherever you want within your component.To simply interpolate all the content passed as content to your component, you can simply use the special element slot: // Button.svelte // App.svelte As you can see, the string “Submit” will take the place of . *Named slots* require us to assign a name to a slot: // Modal.svelte // App.svelte
    Header
    Body
    ## Lifecycle HooksSvelte provides 4 lifecycle hooks, that are imported from thesvelte package. * **onMount**, a callback that runs when the component gets mounted **beforeUpdate**, a callback that runs **before** the components updates **afterUpdate**, a callback that runs **after** the components updates **onDestroy**, a callback that runs when the component gets destroyedonMountis a function that accepts a callback that will be called when the component is mounted on the DOM. In short, it can be associated tongOnInit.If you return a function from the callback, this will be called when the component is unmounted. 💡It’s important to notice that when onMountis called, its inputs have already been initialized. That means,todois already defined when we log it in the snippet above. ## State ManagementState Management is Svelte is incredibly fun and easy, and probably the aspect I like the most about it. Forget Redux’s boilerplate, and let’s see how to build a store that will allow us to store and manipulate our todos.**Writable Store**The first thing we can do is to importwritablefrom the packagesvelte/store and pass to the function the initial state import { writable } from ‘svelte/store’;const initialState = [{name: “Learn Svelte”,done: false }, {name: “Learn Vue”,done: false }];const todos = writable(initialState);Normally, I’d store this in a file called todos.store.jsand export the writable store so that the container component can update it.As you may have noticed,todos``` is now a writable object and not an array. To retrieve the value of the store, we are going to use some Svelte magic: by prepending the store name with `` we can directly access the value of the store!

💡That means, all the references to todos will now be $todos:

{#each $todos as todo}
  <Todo todo={todo} on:done={onDone}></Todo>
{/each}

Setting State

A writable store’s state can be set by calling the method set which will imperatively set the state to the value passed:

const todos = writable(initialState);function removeAll() {
  todos.set([]);
}

Updating State

To update the store based on the current state, in our case the todos store, we can call the function update to which we pass a callback. The return value of the callback will be the new state passed to the store:

Let’s rewrite the function onDone that we defined above:

function onDone(event) {
  const name = event.detail;  todos.update((state) => {
    return state.map((todo) => {
       return todo.name === name ? {...todo, done: true} : todo;
    });
  });
 }

Alright, I know, I wrote a reducer in the component. Not cool, you’re saying. Let’s move that to the store file, and export a function that simply takes care of updating the state.

// todos.store.jsexport function markTodoAsDone(name) {
  const updateFn = (state) => {
    return state.map((todo) => {
       return todo.name === name ? {...todo, done: true} : todo;
    });
  });  todos.update(updateFn);
}// App.svelteimport { markTodoAsDone } from './todos.store';function onDone(event) {
  const name = event.detail;
  markTodoAsDone(name);
}

Listening to value changes

We can use the method .subscribe to listen to value changes from a store, . Notice, though, that the store is not an observable although the interface looks similar.

const subscription = todos.subscribe(console.log);subscription(); // unsubscribe subscription by calling it

💡 Svelte’s store package also provides two more utilities called readable and derivable.

Observables

Oh, the part you were waiting for! You’ll be delighted to know that Svelte recently added support for RxJS and the ECMAScript Observable proposal.

As an Angular developer, I am quite used to working with reactive programming and not having something like the async pipe would be a bummer. But Svelte surprised me once again.

Let’s see how the two can work together: we’ll render a list of repositories from Github searched with the keyword “Svelte”.

You can paste the snippet below in the Svelte REPL and it will just work:

<script>
 import rx from "https://unpkg.com/rxjs/bundles/rxjs.umd.min.js";
 const { pluck, startWith } = rx.operators;
 const ajax = rx.ajax.ajax;
 
 const URL = `https://api.github.com/search/repositories?q=Svelte`;
 
 const repos$ = ajax(URL).pipe(
    pluck("response"),
    pluck("items"),
    startWith([])
 );
</script>{#each $repos$ as repo}
  <div>
    <a href="{repo.url}">{repo.name}</a>
  </div>
{/each}// Angular's implementation
<div *ngFor="let repo of (repos$ | async)>
  <a [attr.href]="{{ repo.url }}">{{ repo.name }}</a>
</div>

As you may have noticed, I prefixed the observable with and Svelte will automagically render it!

My Svelte Wishlist 🧧Typescript support

As a Typescript enthusiast, I can’t help but wish for being able to write typed Svelte. I am so used to it that I keep typing my code, and then have to revert it. I do hope Svelte will soon add support for Typescript, as I suspect it is on everyone’s wishlist should they use Svelte from an Angular background.

Conventions & Coding Guidelines

Being able to render in the view any variable in the script block is both powerful and, in my opinion, potentially messy. I am hoping the Svelte community will be working on a set of conventions and guidelines to help developers keep their files clean and understandable.

Community Support

Svelte is a great project. With more community support such as third-party packages, backers, blog posts, etc. it can take off and become an established, further option to the awesome front-end landscape we’re enjoying nowadays.

Final Words

Although I was not a fan of the previous version, I am fairly impressed with Svelte 3. It’s easy, small (yet exhaustive) and fun. It is so different that it reminds me of the first time when I transitioned from jQuery to Angular, and that’s exciting.

Whatever your framework of choice, learning Svelte will probably take a couple of hours. Once you figured out the basics and the differences with what you’re used to writing, writing Svelte is going to very easy.

If you need any clarifications, or if you think something is unclear or wrong, do please leave a comment!

#web-development #angular

What is GEEK

Buddha Community

Svelte for Angular Developers

Ajay Kapoor

1624334049

Top Angular JS Development Company in India | Angularjs Development

Save up to 60% of development cost and also get state-of-art infrastructure, experienced AngularJS web development team and latest technologies development.

Agile & DevOps Approach for on-time delivery
Strict NDA terms to ensure complete privacy
Flexible engagement models as per your needs
100% money-back guarantee, if not satisfied

Angularjs development company in India

#angular js development company #angular js web development #angular js development company in india #angular development company in india #angular development india #angular development company india

sophia tondon

sophia tondon

1620731241

Hire Top Angular Developers | Hire Angularjs Developer India

Looking to hire top dedicated Angular developers from India at affordable prices? Our First Time Right Angular JS developers build scalable, secure, robust and dynamic web applications while saving up to 60% of your development cost.

You can hire Angular development company on a monthly, hourly, or full-time basis who stay updated with the latest versions and ensure to deliver top-rated bespoke web applications.

Planning to outsource web services using Angular? Or would you like to hire a team of Angular developers? Get in touch for a free consultation!

Visit Website-https://www.valuecoders.com/hire-developers/hire-angularjs-developers

#angular developer #angular js developer #angular js developers #hire angular developer #hire angularjs developers #hiring angular developer

sophia tondon

sophia tondon

1620895296

Hire Top Angular Developers | Hire Angularjs Developer India

Looking to hire top and dedicated Angular developers at affordable prices? Our First Time Right Angular JS developers build scalable, secure, robust and dynamic web applications while saving up to 60% of your development cost.

You can hire Angular developers with 4+ years of average experience on a monthly, hourly, or full-time basis who stay updated with the latest versions and ensure to deliver top-rated bespoke web applications.

Planning to outsource Angular JS development company? Or would you like to hire a team of Angular developers? Get in touch for a free consultation!

##hire dedicated angularjs developer #angularjs development company #hire angular developer #hire angular developers #hire angular js developers #hire angular js developer

Why Choose Angular JS Development for Perfect Web Apps Development?

AngularJS is a JavaScript framework, this was developed by Google. IT is an open-source framework. AngularJS is responsible for handling all the activities and interactive elements on a web page. The main purpose of this framework is to develop applications for one single page. Angular JS highlights the testability process and the quality of codes for web pages. This is one of the main reasons why so many developers prefer this framework over others. Angular JS frameworks have been used in some of the top software development companies.The demand for AngularJS has been growing in all industries. This software system is fast and has helped solve the errors and mistakes of website projects. You can easily hire Angular JS developers team from the market or hire a freelancer for your work. Angular JS is the fastest and easiest framework of JavaScript to integrate with other frameworks. If you hire AngularJS developer you can easily make any kind of front-end website development easy. Why should you choose Angular JS for developing your web application? The main reason is that AngularJS has a lot of benefits, these will help you develop the best quality app. To read more click on the link.

#hire angular js developer #hire dedicated angular js developer #angular js application development #hire dedicated angular js team #hire best angular js application developer #website developer

Custom AngularJS Web App Development Company in USA

Looking for the best custom AngularJS app development company? AppClues Infotech is a top-rated AngularJS app development company in USA producing robust, highly interactive and data-driven AngularJS web and mobile applications with advanced features & technologies.

For more info:
Website: https://www.appcluesinfotech.com/
Email: info@appcluesinfotech.com
Call: +1-978-309-9910

#custom angular js web app development company in usa #best angular js app development company in usa #hire angular js app developers in usa #top angular js app development company #professional angular js app developers #leading angular js app development agency