Partial commits in git

It is very useful to commit only parts of a file you are working on. Git allows this with a combination of the following commands:

git add, git diff, and git commit

Let’s get into this with an example!

Here is the source file we are going to work on:

@Component({
  selector: 'app-products',
  standalone: true,
  imports: [
    AsyncPipe,
    RouterLink
  ],
  templateUrl: './products.component.html',
  styleUrl: './products.component.css'
})
export class ProductsComponent implements OnInit {

  products$: Observable<Product[]> = of([]);

  constructor(private http: HttpClient) {
  }

  ngOnInit(): void {
    this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
  }

  myMethod() {
    // I want to commit this method
  }

  dummyMethod() {
    // I do not want to commit this method
  }
}

A git diff with no further parameters will show us the difference between HEAD and the working directory:

diff --git a/src/app/pages/products/products.component.ts b/src/app/pages/products/products.component.ts
index 0bcbc81..2e8b90b 100644
--- a/src/app/pages/products/products.component.ts
+++ b/src/app/pages/products/products.component.ts
@@ -26,4 +26,12 @@ export class ProductsComponent implements OnInit {
   ngOnInit(): void {
     this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
   }
+
+  myMethod() {
+    // I want to commit this method
+  }
+
+  dummyMethod() {
+    // I do not want to commit this method
+  }
 }
(END)

We see that the change includes the two methods: myMethod and dummyMethod (notice the + characters in front of the lines introduced to the source file).

Now the trick is going to rely on adding to the index with git add only the relevant lines.

Let’s first check what is in the index with git diff --staged (this will show us the difference between HEAD and the index):

(END)

This indicates that the index is still empty.

Now lets add only the lines we want with the following command: git add --patch:

diff --git a/src/app/pages/products/products.component.ts b/src/app/pages/products/products.component.ts
index 0bcbc81..2e8b90b 100644
--- a/src/app/pages/products/products.component.ts
+++ b/src/app/pages/products/products.component.ts
@@ -26,4 +26,12 @@ export class ProductsComponent implements OnInit {
   ngOnInit(): void {
     this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
   }
+
+  myMethod() {
+    // I want to commit this method
+  }
+
+  dummyMethod() {
+    // I do not want to commit this method
+  }
 }
(1/1) Stage this hunk [y,n,q,a,d,e,?]?

We are going to select e in order to edit the file and choose the lines we want as follows:

# Manual hunk edit mode -- see bottom for a quick guide.
@@ -26,4 +26,12 @@ export class ProductsComponent implements OnInit {
   ngOnInit(): void {
     this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
   }
+
+  myMethod() {
+    // I want to commit this method
+  }
+
+  dummyMethod() {
+    // I do not want to commit this method
+  }
 }
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
# If the patch applies cleanly, the edited hunk will immediately be marked for staging.
# If it does not apply cleanly, you will be given an opportunity to
# edit again.  If all lines of the hunk are removed, then the edit is
# aborted and the hunk is left unchanged.

After editing the file, here is what we should have (notice that we have removed the dummyMethod block):

# Manual hunk edit mode -- see bottom for a quick guide.
@@ -26,4 +26,12 @@ export class ProductsComponent implements OnInit {
   ngOnInit(): void { 
     this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
   }
+  
+  myMethod() {
+    // I want to commit this method
+  }
 }
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
# If the patch applies cleanly, the edited hunk will immediately be marked for staging.
# If it does not apply cleanly, you will be given an opportunity to
# edit again.  If all lines of the hunk are removed, then the edit is
# aborted and the hunk is left unchanged.

Now a git diff --staged yields the following output:

diff --git a/src/app/pages/products/products.component.ts b/src/app/pages/products/products.component.ts
index 0bcbc81..0872bc3 100644
--- a/src/app/pages/products/products.component.ts
+++ b/src/app/pages/products/products.component.ts
@@ -26,4 +26,8 @@ export class ProductsComponent implements OnInit {
   ngOnInit(): void {
     this.products$ = this.http.get<Product[]>(`${apiUrl}/products`);
   }
+
+  myMethod() {
+    // I want to commit this method
+  }
 }
(END)

We are ready to commit our changes with the following command:

git commit -m"feat: introduce new method"

Please notice I have not included the -a flag to the above git commit command. This is important and will ensure that only what we have already staged will be committed.

We have shown how to achieve partial commits with the three above git commands. Remember that all the power actually lies in the git add command with the --patch parameter.