DEV Community: Wisdom John ikoi

FROM MILITARY TYPIST TO FULL-TIME SOFTWARE ENGINEER: HOW I BECAME A DEVELOPER

Wisdom John ikoi — Wed, 06 Aug 2025 16:25:02 +0000

Anyone can be a software engineer, you just need grit - codeSage

In 2018, I completed my second year of school, earning a National Diploma in Computer Engineering. As polytechnic students, we typically have a year set out for a student internship before returning to school for a Higher National Diploma.

Based on the expectations of companies and internship programs, I realized that what I had learned over the past two years wasn't up to industry standard. So, I made a decision to level up my skills and become more competitive for future opportunities. One of the first skill sets I focused on was HTML and CSS, and that's how my journey as a developer truly began.

This story contains a brief dive into my developer journey and how serving in the military positively impacted it, things i learnt, and soft skills that may help you in your developer journey too.

Key Takeaways:

What every developer needs to be successful
Soft skills every developer needs
Military and developers' lives correlate from my point of view
Programming is not hard!

Fast forward to 2019, I began applying for internship roles at several places - marine companies, oil companies, even local cyber cafés. After many attempts, a breakthrough came through a kind referral from a lady in my neighborhood. She told me about an opening at the Nigerian Navy Ships Port Harcourt Logistic Depot. That same day, I applied - and thankfully, I got in.
I started the following Monday as a computer operator (typist), working as a civilian staff member.

While i worked as a computer operator, i understood a lot of things about the military and learned a lot from the officers i was serving, but i never dreamt of working as a military officer because i wanted to freely explore software engineering, but then nothing in the developers world made sense to me at this point i was dumb.
While i was in school, i struggled through C++ or any other programming Lecture, sleeping most of the time, i never had any carryover except for C++ in my first year. But wait, why will i still want to be a software engineer when clearly i was already failing at it from entry level?

Pitch Black

After six months working with the Nigerian Navy ship, everything changed; the road became even more blurry, more like pitch black. In the Nigerian Navy, even as a civilian staff, I'm expected to act, speak, and deliver on jobs like a regular rating. I used to take courses on YouTube as i was barely getting by, and i couldn't pay for Udemy courses.

In the first six months, i studied most time when i had less typing job to do, but in the next six months, the work schedule changed. There was a new Acting Commander, and the job became more demanding. Remember, i was just an intern, but after some time, i was treated as an all-out military member.

Usually i close from work by 2 pm or 4 pm based on the workloads, but this time i started working overtime, i mean more like "overkill" because imagine resuming at 8 am and closing from work by 9 pm! Not every day, but mostly days when we have monthly returns or urgent document preparations from Navy Headquarters, and at the end of the day, having a military vehicle drop you off at your house. What i never thought about was, why?

Why did they not let me go home by closing hour and have another military computer operator take over the job from there? Besides, it's just typing. I had little work experience before that time, and i wanted to work because i needed to save up some money for the following school year, so i never complained, but the work-life i knew beforehand had a different meaning than what i was experiencing.

Somedays were cool because based on how hard working i was, polite and never complained i ended up getting tiped and rewarded most times which fired me up, but at this point i have drifted from learning to code to a full time Military Computer Operator, I learnt all the military jargons and writing formats just to be compactible with my current job and in return having little time or energy to write code!
But regardless, i still wanted to be a developer, i mean, as a student worker, i said to myself, "my salary will pay the bills for now, but 3 years from now this will not be enough".

So i resumed my learning even with the high wave of workloads as it seemed like the more time i spend in the military zone the more they saw me as one of them and treated me as such, no emotions, hardwork daily, patterned behavior to submit to superior command, working overtime more frequently, and ended up sleeping at the office some days and oh even getting yelled or abused verbally if a single mistake was made, it's a military thing you get that every once in a while, infact our commander will say to me "you are one of us now get used to all this".

On some public holidays, i don't get the day off, because the military in my country doesn't observe all public holidays, we still work, and as the office computer operator, i have to be there to do the job.

The simple reason why other military computer operators never work in my place was simple, they are not always available, they always go on locations, or sea, or on a mission, and definitely will not be in sync with what is going on in the office by the time they are back. The latest file structure, letter formats, and so on. For some reason, they are out of sync because a lot is going on outside for them, and this was the sole reason i was hired in the first place, so it's more like you have to be here to do your job. me thinking it was an internship. "Well, it was not just the regular civilian one".

After nine months, i finally concluded as a young adult, i said to myself, "this environment is TOXIC! It doesn't support my dreams, I'm forced to behave in a certain way as not to offend superiors, i work overtime, and I'm always stressed".

So I'm like once my intership period is over, I'll quit and go back to school and my ideal life, i said in my head "four months to go". At this point, some kids my age will go home and never resume the next day. Working there got so bad in my opinion, no work-life balance no nobody cares about your personal or mental health, all that was projected was a job that needs to be done and discipline, no excuses!, but why did i not quit?

I simply needed Tuition fees as my dad was ill and i had taken charge of my fees from my second year at school, so you know what it's like in my head. Not like i loved the job, but you know it is what it is.
As bad as i painted my experience in my head, like it or not, working in the military built my mental fortitude! And this is:

What every developer needs to be successful

I was constantly stressed and pushed beyond my limit. My superiors will not take excuses, because on a day were i plan to close up by 2 pm, i see myself at home by 8 pm! Discipline is the military way. If we have to work four extra hours to meet the deadline, we do that with no excuses. I sat on my computer one day from 8 am till 7 pm just typing and making calculation formulas on Excel, i only had 45 minutes or so to get lunch, and i continued.

This was stressful, but little did i know that this is what every developer needs to be successful: Mental Fortitude and Discipline.
Mental strenght is essential as a developer because programing is a mental exercise you think of a solution you try it, you test, you fix bugs, you ship, you refactor, you maintain, it is similar to solving mathematics you solve on a rough sheet you cancel, you solve again until you get the right answer this is what programing is ( if we take away the AI speedy solutions nowadays ) but unfortunately not everyone has the patient and perciverance to keep solving until the right solution is provided.

I was pushed to the edge, and sometimes i break down mentally and get insomnia due to stress. But in return, i realized that my mental strength and focus had grown. Now, when i return to programming videos that i never understood or even sleep while watching. I started to grasp it better and faster; it turns out that working on intense Excel calculations and typing for hours for an extended period had unlocked my inner genius.

At the eleventh month, it was at my front desk that i built my first React application, and it felt like something. I started to juggle learning to code and work at the time i had picked up JavaScript, not well grounded, but at least i was on the go.

Plottwist

While it remained just one month before i get back to school, a new commander was transferred to the depot and the acting commander was replaced. Before now, i had planned to return to school in a month and had decided to study computer science, because computer engineering is more of hardware engineering, and computer science is more Software Engineering.

On the first day of resuming office, the new commander saw me, he asked why i was working as young as i was, i told him my reasons, "it's my IT period and i want to save up some money as I'm responsible for my fees". He asked me if i would like to retain my position in the office and work while i schooled, since i am already grounded with servicing writing (servicing writing is a way the military formats documents ), and this will aid me with fees while in school.

The offer was good for me, i accepted, and we had a cool arrangement on how i could juggle school and work. I started a new journey, now i have work, school, and i have my developer journey.
I juggled all this, going to school from Monday to Wednesday and traveling over 50km to work every Thursday. Some days i stay back at the office to use the power and internet to take courses, and i go home on Friday.

It was another stress-filled phase, but in a few months, some new military personnel were transferred to the depot, and a few were computer operators. I was tasked with grooming them in this phase, i assumed a leadership role.

I slowly caught up with the pace of the work after a year and six months, I had become the go-to guy, the IT specialist, not just operating computers and machines, now I maintain computers, upgrade networks and infrastructure, recommend other facilities needed in the office; hard drives, backing up documents in the cloud, replacing modems with routers and modern service providers. I was upgrading the military office. I started solving other problems besides just typing, even though it wasn't my official role, everyone saw me as a solution architect around, and every IT problem came through my desk, some i had no solution but to recommend a better engineer, unknown to me that these are the:

Soft skills every developer needs

At the office, everyone will acknowledge my opinion before any change is made to the computers or services; as such, i had no choice but to own up to my responsibilities and expectations. This is one of the many soft skills every developer needs, "leadership", and i was grooming this subconsciously.

As a developer, you need to own whatever product you are working on. Have you ever worked on a UI that was designed and, when implemented at the end, you were blamed for the outcome? It's essential to assess whether a UI design aligns with the intended use case before implementation. This means proactively identifying where a design may fall short in terms of usability or feasibility and communicating those concerns clearly and constructively. Doing so reflects leadership - it shows ownership of the process and a commitment to delivering real, user-centered value.

As a leader, you will also need to possess empathy; you need to put yourself in the designer's shoes to understand why they did what they did, or what they were thinking when they did what they did.
You also need to be able to communicate openly and effectively, so let the designer know why the method will not work, which means you need to explain plainly to both the PM and the product owner in a way they will understand, using diagrams, screenshots, or a flow chart as the case may be.

In this period of time, i have developed both empathy, communication, and leadership skills, taking risks and proactive decisions in a work environment. These are some of the soft skills every developer needs
The years passed, and I completed my degree in Computer Science - but truthfully, I still felt half-baked as a software engineer. I had spent over three years working with the military, where I had earned trust and respect. Everyone expected that once I graduated, I would become a full-time personnel. I had a secure path into the Navy if I chose to take it.

But I was torn.

My journey in software development still felt shaky. I knew that if I left the Navy to chase my dream and failed, I might never get the opportunity to return - at least, that's how it felt at the time. My programming knowledge came partly from my university studies and scattered YouTube tutorials. There was no AI - just a big gap between where I was and where I wanted to be.

Leaving the Navy, a place where I was known, respected, and supported, felt almost like betrayal. But I knew I had to take the risk. So, I met with my commander, explained my reasons, and after graduation, I left.

Before graduating, I had already started sending out applications and managed to secure an internship with a small tech company. Surprisingly, the pay matched what I was already earning in the Nigerian Navy. So in reality, I wasn't taking a financial risk - I was simply transitioning from one path to another with a more long-term risk.

A few months later, I officially began my internship. No more school, no more navy jobs - just one focus: learning how to code professionally. As an intern at CAD Consulting Limited, I started from the ground up as if i were an absolute beginner, as advised by my mentor. I re-learned HTML, CSS, and JavaScript, then progressed to React and eventually Angular. Within six months, I was working as a junior front-end developer, building web apps and shipping websites for the company.

Things were going well, but this phase came with its challenges. The office was far from home, and commuting daily was expensive. To cut costs, I stayed in the company's boys' quarters - just to stay close and save on transportation.

It was an onsite role, and since i already stayed at the office boys quarter soon i started sleeping at the office because at this point i had one goal clear, "this place is a starting point and i only want to be here for as much as i can learn once i'm good enough i will start shooting for bigger companies like google, amazon "
This time, the journey felt different - better. I had a direct programming mentor: the owner of the company himself. He groomed us, guiding and pushing us in the right direction. But after the first six months, he got caught up with other responsibilities and could no longer be as involved. At that point, I had to return to being self-taught, but with a better, solid foundation.

That was when I began staying back late at the office, most nights after my colleagues had gone home. I'd remain behind, building small things, tinkering with code, and working on personal projects. It became my new way of learning - through consistency, experimentation, and long nights.

I did not find doing any of this hard because:

Military life and developer life correlate from my Point of View

While i was working with the military, i had already gotten used to sleeping at the office and coding late at night, i was used to the hard life, the grit, the grind, the mental toughness.
Was it convenient for me? no! But military life and developer life correlate from my point of view. The military personnel were disciplined and worked as hard as they could to get things done. i applied that same mentality as a developer.

They would not accept excuses in the military, so in my journey, i refused to give myself excuses. In the military, a document goes through so many rounds of corrections that a missed comma would result in a re-print of an entire document, so much validation is required to get an excellent outcome. I had gotten used to this rigorous process, and i did the same while writing code because that repetition process is the same as debugging!
Funny enough, much of what I was doing at the tech company, I had already experienced in the Navy, just in a different form. It wasn't code I was writing back then, but the discipline, the work ethic, and the demanding environment had already shaped me. So when challenges came, I wasn't fazed.

The Navy had prepared me for the pressure, the long hours, and the persistence required in tech - I just didn't realize it at the time. So what's more? It's just the same skill set applied in another industry, so my years serving there were not a waste; it was a medium to a greater journey.

I tell you the truth, it is easier to learn programming in this AI Era, so i know what i mean when i say i debug codes all night! Sometimes it's just some little simple fix, but as a "dumb" junior, i will spend time on it. Stack Overflow doesn't help sometimes, you just search through and no results for your particular problem, if you ask a question, it takes a whole day for someone to see your problem, and sometimes another whole day for a messiah to solve it. like, "Who has that time?".

I put in the grind for about 1 year, and after that, I left the company as a confident intermediate web and mobile front-end engineer. I got another job and another, and i kept moving higher till date. I'm currently a front-end rich media developer as of when I'm writing this article!

The big flex is i became what i set out to be! As for the navy, i did not go back, i was still stopping by once in a while to help them with fixes and recommendations, but with time we parted ways, i am still in touch with them to date.

It might not mean so much to you reading this article, but well it means alot to me, i have seen a lot of people set out to be a software developer/engineer but could not keep up, maybe too much noise around them, or some will say programming gives me head ache it's too hard, i'm not sure it's for me well! Anyone can be a software engineer; you just need grit! i mean enough grit!, and for those saying programming is hard.

Programming is not hard! You're just not hard!

There were days when i felt like going home, it was lonely, i wanted to party like some of my friends, but I never gave in, because i had a dream to fulfil something i promised myself, something i would sacrifice every other career path to chase.

If you made it this far, then you are the real MVP. Do good to leave a love if you enjoyed this story. Follow for more Developer stories.
Disclaimer: This story is an authentic story from my real-life work experience, not fiction or exaggeration.

JavaScript is not hard!! you are just not learning it the right way!!

Wisdom John ikoi — Sun, 02 Oct 2022 06:23:52 +0000

A term I always hear from rookies while trying to learn JavaScript is " JavaScript is hard!!" it makes learning JavaScript sound impossible, honestly after attempting JavaScript for the first time I said the same thing too. After the rollercoaster of learning HTML & CSS, aspiring web developers tend to get limited to UI/UX design because of the constant bumper in JavaScript.

After learning with a different approach, I got to understand that JavaScript is not hard!! you just have to learn it the right way!!

Well, I'm not saying JavaScript is not hard at all or it won't be a challenge to learn it. in the end, no programming language is easy to learn, but with the right approach and guide, you can learn faster and avoid pitfalls that might slow you down or make you not learn at all.

Pre-requisite

Basic knowledge of the web
HTML & CSS

What is JavaScript?
JavaScript is a high-level programming language, it is a scripting language for webpages, that allows developers to create functionalities for a webpage.

Although the language was written in a short period of time and it's a bit unstable, it is still not impossible to learn. JavaScript is the core language of the web it's in charge of every interactivity that happens on a website as well as any data-driven web application.

This article is geared towards motivating those who are new to JavaScript (JS) and setting them up with the right mood of operation while learning JS, to avoid bottle-necks or pitfalls, one thing is to be inspired to learn and the other is to learn with the right mindset and proper guide in order not to get stuck or quit.

Key takeaway

A better approach to learning JavaScript.

The Journey

Learning the right way can speed up your learning curve and these are some tips to fast-pace your JavaScript journey, understand that these points are from my own journey so there is no formula that says "these key points are the compulsory methods to learn JS" whereas, as you embark on the journey you will find better ways to achieve your goals.

Read a JS book first

Besides watching videos and coding the most reliable way to learn to code is by reading coding materials. A good number of vlogs don't tell you why they just show you how. they provide a structured solution and solve your problems but then when provided with a blank screen you might not be able to think on your own and create solutions.

Reading first opens your mind and lets you get more logical when reasoning, you know how, why, and every other nook and cranny, it gives you a solid foundation in the language including, exercises to help you build thinking muscles, after getting a solid foundation its okay to start watching videos.

Have a Road Map

One of the major barricades while learning JS is having no road map. Most people just learn JavaScript the way they see fit. Starting out after taking a course, I go online to search for a JS beginner practice project, then end up getting confused because the projects seem to have advanced concepts or dive deeper it just won't connect and I have probably just learned the basics.

Having a roadmap includes having a mentor, someone who has walked that road before. this person will help you connect the dot. An online instructor, a book, or a physical mentor will do.

Take a course that builds a product

You can take a course with mini examples and exercises e.g calculator, fizz buzz e.tc. when you try to put it all together and build a bigger project it seems overwhelming because the knowledge gap is evident.

The best type, of course, to take so far are courses that build little components and then add them up to build a larger product at the end of the course. this gives you a first-hand feel of how a real web project is built.

By the end, you must have built re-usable patterns and components to approach a real-life project

Hard Code it!!

Coding this out is the most efficient way to retain coding knowledge, Be it a book or video whichever material you are using to take a JavaScript tutorial do not copy and paste codes.

It is tiring but yeah, the more you hard code it the more it sinks into your head. Just as while studying whatever you write out sticks to your brain, the same thing happens when you type out your code.

Loop through whatever you learn

Do things repeatedly, when starting out you may have to re-write codes over and again to make them stick unless you have a very retentive memory.

One way to gain mastery of anything is to do it repeatedly, by the time you write a function a hundred times you will write with your eyes closed. Re-rewrite variables, re-write functions, and declare an array repeatedly, just to understand it instead of cramming the syntax.

Get a study buddy!!

Getting a companion is very important, it could be a community, a course-mate, or a friend. The essence of a study buddy is to discuss and share ideas together.

Explaining concepts vocally, helps the information stick. somethings you hear from a person you know will surely stay actively in your mind compared to an online video.

Because we all learn from different perspectives discussing with your buddy makes you understand a concept from different views.

Be patient with yourself

Sometimes you might be tempted to skip processes or hasten things up, probably because you are trying to learn the skill fast and get a high-paying job or you just can't want to gain mastery.

The thing is the process is just as important as your destination. learning to code takes time and every step is important.

Conclusion

As you delve in deeper you will discover better ways to learn the language, everyone is wired differently, therefore we all have our unique ways of learning based on our strengths.

Installing Angular CLI Locally & Globally

Wisdom John ikoi — Thu, 15 Sep 2022 21:12:28 +0000

Angular is a JavaScript Framework and it is one of the world most powerful web development platform.

Starting an angular project will require an IDE and a development environment. Setting up a project can be done in two ways either by setting up on the cloud or by setting up a local environment and workspace.

While working directly in a cloud-based environment is an awesome experience, setting up your coding project in a local environment is mostly preferred especially on a large project and code base.

This article explains how to set up your Angular development environment locally or globally using the Angular CLI tool.

Globally

To install angular CLI globally Run the following command on your VSCode Terminal or Command Prompt.

npm install -g @angular/cli

(Optional)

_The following is angular's execution policy, see the official documentation:

https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.core/about/about_execution_policies_

Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

You have successfully installed the angular CLI globally with the latest version of angular.

You can now create an angular application in any directory it will listen for the global CLI.

To create a new workspace navigate to a specific folder in your terminal and run:

ng new appName

A starter app is created, select which feature should be installed alongside your initial app and press enter.

now your app is created, and depends on the angular CLI version that was installed globally.

Locally

While creating subsequent angular applications (ng apps) you might want a lesser version and you may not want to re-install your global CLI because it will affect other apps that depend on it.

This is where local CLI installation comes in. The local CLI serves as a dependency to an ng-app or a set of ng-apps ignoring the Global CLI.

which means the Global CLI can be angular V14 and the local CLI supports angular V13 making all apps that depend on it respond to that angular version.

The local CLI serves as a guard and restricts apps from listening to the global CLI.

To set up an angular application locally do the following.

Open a folder on your code editor. i.e VSCode, Atom, Brackets e.t.c.
On the terminal navigate to the folder you want to install angular CLI on locally.
Run the following command.

npm install @angular/cli@V13.3.3

Notice the omitted -g and the version indication? here we are installing an angular CLI-specific version.

In that same folder create your starter app.

ng new appName

**
Conclusion**

Any Application you generate within that folder/directory is restricted to the Angular locally installed CLI version.

While the ones created outside the folder automatically listen for the global CLI and subscribe to it as its dependency.

Installing Angular CLI locally or globally has its own effect on the development process, you can choose to subscribe to the global CLI or create a local CLI for your individual angular application to depend on.

Extra

I prefer to localize my angular projects and give them standalone CLI as I see fit, what do you prefer?

Component Interactivity in angular 14

Wisdom John ikoi — Wed, 07 Sep 2022 05:34:43 +0000

Simple two-way communication between two or more related components is known as component interaction; this includes the exchanging of information, properties, events, and functions.

Once an Angular component is formed, component associations are established. The family tree expands as you begin layering components inside one another. Parents, kids, siblings, and other family members are just a few examples of how components are connected.

Nesting is a characteristic that naturally comes from HTML. An element in HTML that is nested inside of another element inherits the parent element's attributes and properties. That isn't necessarily the case with Angular.

You will need to carry out some additional configuration to allow parents to exchange data with children or children to share data with parents or related components.

In Angular, this is made possible using decorators, view children, and Angular services.

Key takeaway

Understand Components interactivity in angular.

Pre-requisite.

Fundamentals of angular/angular components.
Decorators in angular/TypeScript
Nesting.

To enable Component interactivity and let data be shared between components in angular you will have to consider the kind of relationship that exists between the components.

Parent => child

A Child Component can receive data from its parent component through the @input decorator. After creating a relationship the child component imports the @input decorator and declares the decorator in the component class and the data it is trying to receive from the parent.

Generate three angular components to get started, name them child, parent, and relative.

Here is the CSS file for the three components give them any three different background colors to see the difference.

div {
    background-color: rgb(255, 47, 47);
    height: 200px;
    width: 200px;
}

Code along!!

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

  @Component({
  selector: 'app-parent',
  templateUrl: '



Parent Element

Message: {{message}}


',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  message:string = "Received from parent";
  
}

On the parent component above, input the message string property into the child, now the parent and child component is supposed to display the same data based on shared connectivity, which is the message string.

In the parent component, a message data is declared and inside the nested tag of the child component, the property is referenced using the variable name [message]=" message" this attribute binds the message property between the parent and child.

Now below is the child component. here you have to import the input decorator to the child component class and also declare the string variable "message" with the input decorator in front of it.

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

@Component({
  selector: 'app-child',
  templateUrl: '
 

Child Component

    Message: {{message}}

',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
 
@Input() message:string | undefined;

}

Result
Both Components should display "Received from parent" now they share the same data.

Child => parent
A child can Share data with its parent Via the @output decorator and also share a function Via event emitter. here you are going to pass two data to the parent component, a function, and a property. the output decorator is a normal method for property sharing from child to parent, while the event emitter shares a function with the parent component. in cases where you bind data and share, it's okay to use just the output decorator.

In the example below you will be binding a message variable and also an event that changes both parent and child data on Click.

start by updating the child component with the required imports.

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

@Component({
  selector: 'app-child',
  templateUrl: ' 



Child Component 

        message {{childMessage}}
        Send message

',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  childMessage: string = "xenxei 46"

  @Output() messageEvent = new EventEmitter();

  sendMessage() {
    this.messageEvent.emit(this.childMessage)
  }
}

"Send Message" is the event you want to share and the property you are sharing with the parent is named "childMessage".

Now on the parent, you will receive the emitted event with the nested tag of the child element renaming the variable to receive the property to "receiveMessage".

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

@Component({
  selector: 'app-parent',
  templateUrl: '



Parent Element

Message: {{childMessage}}



',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent  {
  childMessage = '';

  receieveMessage($event: string) {
    this.childMessage = $event
  }

}

The child message is passed as an empty string and when the button is clicked the message is shown on the parent component.

Child => Parent using @viewChild
Another method to simply pass property from a child to a parent is via the @viewchild decorator.

In the child component below, the property is viewed on the parent component as soon as the component is initialized. The child property is stored using ViewChildmsg.

import { Component} from '@angular/core';
@Component({
  selector: 'app-child',
  templateUrl: '




Child Component

say: {{viewChildmsg}}

',
  styleUrls: ['./child.component.css']
})
export class ChildComponent  {

  viewchildmsg: string = "Hola xenxei!"

}

The parent component views the child's property by using the following:

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from '../child/child.component';

@Component({
  selector: 'app-parent',
  templateUrl: '



Parent component

{{viewchildmsg}}


',
  styleUrls: ['./parent.component.css']
})

export class ParentComponent implements AfterViewInit  {

  @ViewChild(ChildComponent) child: any;

  viewchildmsg!:string;

 ngAfterViewInit(){
  this.viewchildmsg = this.child.viewchildmsg;
 }

}

In the rendered screen both the parent and child components should carry the same message. The @viewChild decorator carries the property from the child, stores the value on the new variable or the same variable as the case may be, and tells it to render After the view is initialized by taking the property of the view child.

Sharing Data Between Relative Components
In angular, data can be shared between unrelated components or relative components.

A function or properties (Data) can be shared with a related component, this is made possible through angular service.

Generate a service component named data. to generate angular service use "ng generate service [service name]".

Update the generated angular service.

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class DataServiceService {

  private messageSource = new BehaviorSubject("shared message");
  currentMessage = this.messageSource.asObservable();

  constructor() { }

  changeMessage(message: string) {
    this.messageSource.next(message)
  } 
}

Message source is a variable assigned as a behavior subject and a string type "shared message" later passed to current message as an observable. Why was all this process passed through? well there is no need to worry This is just a convention there are other logic going on under the hood.

To pass the string "shared message" to the child component, import the service to the child component and other dependencies as shown in the code below.

Pass a variable to the message in the child component and interpolate the message variable on the template to see "shared message" on your view.

Update the child component as directed:

import { Component, OnInit} from '@angular/core';
import { DataServiceService } from '../data.service';


@Component({
  selector: 'app-child',
  templateUrl: ' 



Child Component

    

Message from service says: {{message}}



',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  message!: string;

  constructor(private data: DataServiceService) { }

  ngOnInit(): void {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

  newMessage() {
    this.data.changeMessage("Hello from relative component")
  }

}

Now that the property and the function have been passed to the child component pass it to the parent component as well.

import { Component, OnInit} from '@angular/core';
import { DataServiceService } from '../data.service';

@Component({
  selector: 'app-parent',
  templateUrl: '


Parent Component



Message:  {{message}}




',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit  {

  constructor(private data: DataServiceService) { }

  message!: string;

  ngOnInit(): void {
    this.data.currentMessage.subscribe(message => this.message = message)
  }

}

On the Relative component do the same, This is where the function is initialized. on the relative component.ts, the function is written to change the shared message currently displaying on all three components.
Both parent and child components should respond to the change on click.

import { Component, OnInit} from '@angular/core';
import { DataServiceService } from '../data.service';

@Component({
  selector: 'app-relative',
  templateUrl: '

    
Relative component

    New Message


',
  styleUrls: ['./relative.component.css']
})
export class RelativeComponent implements OnInit {

  message!:string;

constructor (private data: DataServiceService)

ngOnInit(): void
Subscribe(message = this.message) to this.data.currentMessage
  }

  newMessage() {
this.data.changeMessage ("Hello from a sibling")
  }

}

Conclusion

A component interaction scenario occurs when a function can be written in a component and used or called up in another component.

or when data or logic needs to be handled by a parent but the view is gotten from a child component. The same data, once manipulated, will take effect on every component that shares the data.

Component interactivity comes in handy when building a large application that is split into several components.

In summary, this is made possible using the following tools:

@input decorators: Passes information from parent to child.
@output decorators: Transfers data from parent to child. @viewchild: Passes information from a parent to a child. Services: shares data between related or unrelated components.

Source code is at my GitHub repo: https://github.com/xenxei46/Angular/tree/main/Component%20Interaction

Understanding the Document Object Model JS Foundation

Wisdom John ikoi — Mon, 01 Aug 2022 23:32:00 +0000

One of the main concepts of JavaScript is the Document Object Model, so it is essential to have a solid understanding of JavaScript in order to be able to manipulate the DOM.

When you have finally mastered the fundamentals of JavaScript and are ready to go deeper, you need to understand how the DOM works.

The majority of the many behaviors you observe on a webpage are the result of adding, changing, and removing element classes that rely on DOM manipulation.

The DOM is where CRUD all began, which may go unnoticed while learning JS. If you need to use CRUD functionality in other JavaScript frameworks, the adding, editing, and deleting of elements from the DOM is evidence of that.

Key takeaways

Understand how the DOM works.
Know the various DOM selectors
*Understand how to select DOM elements.

Pre-Requisites
*HTML
*CSS
*JavaScript-basics

What is the DOM?

DOM is an abbreviation for Document Object Model; the DOM is the structural representation of a web page. After writing the HTML and CSS for a webpage, when it is viewed on a web browser, it is displayed as a structure, which is often referred to as a "family tree," which shows the relationship between elements and their hierarchy; this is practically the document object model.

The DOM provides a way to interact with the web elements ( HTMLand& CSS ), listen for events, add styling, and create and remove classes or elements.

In the DOM, each element turns into an object or a node. In order to manipulate and interact with the web page, JavaScript employs built-in methods to select specific elements.
The flow of the control to manipulate the DOM is to first select the element and then manipulate it. To carry out this manipulation, there are some activities carried out by the DOM.

DOM Activities

*Select element
*Traverse DOM
Create or Remove Elements
Create or remove classes
Add or Remove Styling
*Create Attributes

DOM Selectors
DOM selectors are JavaScript in-built methods used to select an object or node in the DOM before it is manipulated. There are several selectors, which are listed below:

*GetElementById
*GetElementsByTagName
*GetElementsByClassName
*QuerySelector
*QuerySelectorAll

How selectors work
A selector can pick an element from the DOM and assign it to a variable, then it can be referenced and manipulated with the given value. All selectors have different uses, as the name implies, but they all select data in a specific way.

getElementbyId: This method allows you to select an element based on its ID name.
getElementbyTagName: This method allows you to select an element based on its tag name.
The same is true for the ClassName, whereas the querySelector allows you to select elements based on the selector you passed, such as id, class, or tag, enclosed in a bracket:getELementbyquerySelector("selector-name");

How to select DOM elements

`<html>
<head>
<title>DOM Selectors</title>
</head>
<body>
<h1 id="title">Hello DOM</h1>
</body>
</html>`

The h1 element in the code above will be selected by Id and then assigned to a variable heading before it is manipulated.

"cont heading = document.getELementById('title');"
heading.style.color = "red";
`

The heading variable is used to change the h1 text color to red. "Hello DOM" becomes red. Now that you have selected and manipulated your first DOM element, code it out to see how it works. You can also decide to delete elements, add animation to an element, or add a new element to the DOM.

This is the basic way to select elements from the DOM. Other DOM selectors rely on the same method; they just have a unique selector mode, as you can see below.

"const heading = document.getELEMENTBYCLASSNAME('title');"
heading = doc.getELementsByTagName('h1');
const heading = document.querySelector('#title');
const heading = document.querySelectorAll('#title');
`
All selectors perform the same duty; what you select an element with depends on how you decide to create it. Note that querySelectorAll is unique because it selects every element that carries that selector name.

Take note of the syntax and selector differences and know the pattern.

Select the element or group of elements we want.
Decide on the effect we want to apply to the selection.
//getElementById('element')
//getElemensByTagName( 'tagname' );
//getElementsByClassName('classname');
//querySelector('any css'); - returns a single result.
// querySelectorAll('any css'); - returns all results.

Navigating your way through the DOM

Now that you have performed your first DOM manipulation, there are other advanced methods to select DOM elements in critical situations, like selecting an element's child, grandchild, parent, or grandparent. All these are dependent on other DOM methods; some of the examples are below.

"// childNodes" returns all childNodes, including whitespace, which is treated as a text node.
// children
// firstChild
// lastChild
// previousSibling
// nextSibling`

Summary
With these very basics, you can further navigate your way through finding and testing the most common DOM methods you will need as you write JavaScript. They are all dependent on this same concept; just know the method and know where and when to use it. I hope this article helps you understand how the DOM works.